一. 事件
javascript 与 html 页面之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。事件是可以被 JavaScript 侦测到的行为,比如我们要实现下面的效果就需要绑定相应的事件:
鼠标点击 页面或图像载入 鼠标悬浮于页面的某个热点之上 在表单中选取输入框 确认表单 键盘按键
下面主要从事件流,事件绑定,事件对象以及事件委托四个方面来总结一下 js 中的事件机制。
二. 事件流
事件流描述的是从页面中接受事件的顺序,事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件。
下面这个图清晰地展示了事件流的过程:
其中 1~5 描述的是事件捕获过程,5~6 描述的是目标过程,6~10 描述的是冒泡过程。
捕获阶段:事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。首先 window 会捕获到事件,之后会是 document,body,之后 body 中的 dom 会一层一层捕获到目标元素。即从 dom 树的根到叶子。
目标阶段:真正的触发元素会发生两次事件,一次捕获,一次冒泡。
冒泡阶段:事件开始时由最具体的元素接受,然后逐级向上传播到较为不具体的节点。由具体元素一层一层冒泡到 window,类似于捕获阶段的逆过程。即从 dom 树的叶子到根。
三. 事件绑定
事件绑定 (用 click 事件举例) 有这么几种方法:
1. 嵌入绑定形式
2.js 中利用 dom 直接绑定
- element.onclick = function() {...
- }
3. 利用 addEventListener 绑定
- element.addEventListener('click',
- function() {...
- },
- false);
元素直接绑定和 addEventListener 的区别:
1.onclick 只有冒泡过程,而 addEventListener 既可以有冒泡过程也可以有捕获的过程。addEventListener 接受三个参数,第一个为事件,第二个为执行的函数,第三个为选择冒泡还是捕获的过程 (默认为 false 冒泡,true 为捕获)。
2. 重复绑定。比如直接绑定两个 onclick 事件,第一个事件将会被第二个覆盖。而 addEventListener 可以重复绑定相同事件,并且都可以得到执行。
另:不管是直接绑定还是 addEventListener 都有一个好处是里面的 this 都指向当前对象。
四. 事件对象
在触发 dom 上的某个事件时,会产生一个事件对象 event,这个对象包含着所有与事件有关的信息。包括导致事件的元素,事件的类型以及其他与特定事件相关的信息。常见的事件对象成员有以下几个:
属性 / 方法类型读 / 写说明
bubblesBoolean 只读表示事件是否冒泡
cancelableBoolean 只读表明是否可以取消事件的默认行为
currentTargetElement 只读其事件处理程序当前正在处理事件的那个元素
defaultPreventedBoolean 只读为 true 表示已经调用了 preventDefault
detailInteger 只读与事件相关的细节信息
eventPhaseInteger 只读调用事件处理程序的阶段:1 表示捕获阶段,2 表示 "处于目标",3 表示冒泡阶段
preventDefault()Function 只读取消事件的默认行为。如果 cancelable 是 true,则可以使用这个方法
stopImmediatePropagationFunction 只读取消事件的默认行为。如果 cancelable 是 true,则可以使用这个方法
stopPropagation()Function 只读取消事件的进一步捕获或冒泡。如果 bubbles 为 true,则可以使用这个方法
targetElement 只读事件的目标
trustedBoolean 只读为 true 表示事件是浏览器生成的。为 false 表示事件是由开发人员通过 javascript 创建的
typeString 只读被触发的事件类型
viewAbstractView 只读与事件关联的抽象视图。等同于发生时间的 window 对象
五. 事件委托
利用冒泡的原理,把事件加到父级上,触发执行效果。当网页中需要触发事件的对象比较多的时候,为了避免内存泄漏,我们把事件委托到其父对象上,借助事件冒泡机制,可以将事件委托到 body,document 等元素上,这样等于一个页面就只有一个事件触发,避免直接把事件添加到多个对象上。
举一个小例子:
点击 li 弹出对应的 innerHTML 的值,就减少了给每一个 li 绑定事件的操作。
111
222
333
444
555
优点:
可以大量节省内存占用,减少事件注册。 可以方便地动态添加和修改元素,不需要因为元素的改动而修改事件绑定。 JavaScript 和 DOM 节点之间的关联变少了,这样也就减少了因循环引用而带来的内存泄漏发生的概率。
缺点:
不是所有的事件都能冒泡的 (blur、focus、load 和 unload)。
六. chrome 与 ie 事件机制的对比
1. 事件流
IE:目标过程 -> 冒泡过程
chrome:捕获过程 -> 目标过程 -> 冒泡过程
2. 绑定事件
IE: attachEvent()
chrome:addEventListener()
3. 事件对象
IE:event.srcElement
chrome:event.target
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: http://www.92to.com/bangong/2017/03-15/18806804.html