DOM事件

DDreach 发布于2019-08-23 17:16 / 1331人阅读

摘要：语法事件执行脚本在元素上绑定事件。最后这个布尔值参数如果是，表示在捕获阶段调用事件处理程序如果是，表示在冒泡阶段调用事件处理程序。

注：部分参考来源：JavaScript 高级程序设计（第3版）
注：部分参考来源：慕课网

什么是事件

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

事件流

事件流描述的是从页面中接收事件的顺序。

IE的事件流是事件冒泡流。

Netscape Communicator 的事件流是事件捕获流。

事件冒泡

IE的事件流叫做事件冒泡。

单击页面中的

，这个click事件按照下图顺序传播：

事件捕获

Netscape Communicator 团队的事件流叫做事件捕获。

单击页面中的

，这个click事件按照下图顺序传播：

HTML事件

直接在HTML元素标签内添加事件、执行脚本。

语法：

在HTML元素上绑定事件。

执行脚本可以是一个函数的调用

缺点：HTML代码和javaScript代码紧密耦合。

DOM0级事件

语法：ele.事件 = 执行脚本

功能：在DOM对象上绑定事件

说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用

开始

DOM2级事件

定义了两个方法：addEventListener()、removeEventListener()

3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

按钮

事件类型

UI事件

焦点事件

鼠标事件

滚轮事件

文本事件

键盘事件

合成事件

变动事件

onload：页面加载时触发	onclick：鼠标点击时触发
onmouseover：鼠标滑过时触发	Donmouseout：鼠标离开时触发
onfoucs：获得焦点时触发	onblur：失去焦点时触发
onchange：域的内容改变时发生

小例子：当脚本放在head之间时，加 onload

小例子： onfoucs、onblur

小例子：onchange


    请选择颜色：

键盘事件与keyCode属性

onkeydown：在用户按下一个键盘按键时发生	onkeypress：在键盘按键被按下并释放一个键时发生
onkeyup：在键盘按键被松开时发生	keyCode：返回onkeypress、onkeydown或onkeyup 事件触发的键的值的字符代码，或键的代码

小例子：keyCode

document.onkeypress = function(event){
    console.log(event.keyCode);
}

小例子：onkeyup



    您还可以输入30/30

事件委托

事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。即：利用冒泡机制将一类事件触发尽可能高的委托给其父节点或祖先节点来触发事件处理函数，这样只需要定义一个函数，访问一次DOM对象，减少了内存的占用以及访问DOM元素的时间，降低了性能的消耗。如：li-->ul

不好的地方，请多多指教

云服务器 GPU云服务器 DOM事件 dom事件管理 dom事件冒泡 DOM元素事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104074.html

DOM 事件深入浅出（一）

摘要：本文就将带大家深入浅出地了解事件的那些属性和方法。针对不同级别的，我们的事件处理方式也是不一样的。当然其优点是不需要操作来完成事件的绑定。文章地址事件深入浅出二。在项目开发时，我们时常需要考虑用户在使用产品时产生的各种各样的交互事件，比如鼠标点击事件、敲击键盘事件等。这样的事件行为都是前端DOM事件的组成部分，不同的DOM事件会有不同的触发条件和触发效果。本文就将带大家深入浅出地了解...

macg0406 2019-08-20 11:31 评论0 收藏0
原生js之DOM事件相关

摘要：而由于级标准中并没有定义事件相关的内容，所以事件级别只包括级，级和级三种。此属性返回当前事件所绑定的对象。自定义事件可以绑定到任意元素上，此处选择只是为了演示方便。前端学习的东西有很多，现代前端开发，前端工程化的东西要懂，基础的原生js也要懂，毕竟，框架都是有生命周期的，更替非常快，然而却有这么一个框架，它是最轻量的前端框架，每个浏览器都内置，它叫vanilla.js。好吧，其实va...

learning 2019-08-22 13:51 评论0 收藏0
读书笔记(05) - 事件 - JavaScript高级程序设计

摘要：而事件分为个级别级事件处理程序，级事件处理程序和级事件处理程序。级中没有规范事件的相关内容，所以没有级事件处理。 showImg(https://segmentfault.com/img/bVburYR?w=499&h=400); HTML依托于JavaScript来实现用户与WEB网页之间的动态交互，接收用户操作并做出相应的反馈，而事件在此间则充当桥梁的重要角色。日常开发中，经常会...

tinylcy 2019-08-23 13:58 评论0 收藏0
整理DOM事件相关知识点

摘要：事件相关内容当用户与浏览器发生的一些交互时如果希望去获得用户行为就需要借助事件来完成事件部分内容在中重要性不言而喻罗列需要了解与事件相关的知识如下这也是面试中遇到的问题事件的级别事件模型事件流事件处理程序描述事件捕获冒泡的具体流程对象常见的 DOM事件相关内容当用户与浏览器发生的一些交互时, 如果希望去获得用户行为, 就需要借助事件来完成. 事件部分内容在 JS中重要性不言而喻. ...

shenhualong 2019-08-02 15:26 评论0 收藏0
整理DOM事件相关知识点

摘要：事件相关内容当用户与浏览器发生的一些交互时如果希望去获得用户行为就需要借助事件来完成事件部分内容在中重要性不言而喻罗列需要了解与事件相关的知识如下这也是面试中遇到的问题事件的级别事件模型事件流事件处理程序描述事件捕获冒泡的具体流程对象常见的 DOM事件相关内容当用户与浏览器发生的一些交互时, 如果希望去获得用户行为, 就需要借助事件来完成. 事件部分内容在 JS中重要性不言而喻. ...

red_bricks 2019-08-23 18:25 评论0 收藏0