谈起 JavaScript 的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。
事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标 (target)。
事件冒泡阶段:事件从事件目标 (target) 开始,往上冒泡直到页面的最上一级标签。
1、冒泡事件:
事件按照从最特定的事件目标到最不特定的事件目标 (document 对象) 的顺序触发。通俗来讲就是,就是当设定了多个 div 的嵌套时;即建立了父子关系,当父 div 与子 div 共同加入了 onclick 事件时,当触发了子 div 的 onclick 事件后,子 div 进行相应的 js 操作,但是父 div 的 onclick 事件同样会被触发。
html:
- <div>
- <input type="button" value="测试事件冒泡" />
- </div>
js:
- var $input = document.getElementsByTagName("input")[0];
- var $div = document.getElementsByTagName("div")[0];
- var $body = document.getElementsByTagName("body")[0];
- $input.onclick = function(e) {
- this.style.border = "5px solid red"
- var e = e || window.e;
- alert("red")
- }
- $div.onclick = function(e) {
- this.style.border = "5px solid green"alert("green")
- }
- $body.onclick = function(e) {
- this.style.border = "5px solid yellow"alert("yellow")
- }
效果:依次弹出 "red","green","yellow"。这就是事件冒泡:触发 button 这个元素,却连同父元素绑定的事件一同触发。
2、阻止事件冒泡
如果对 input 的事件绑定改为:
- $input.onclick = function(e) {
- this.style.border = "5px solid red"
- var e = e || window.e;
- alert("red") e.stopPropagation();
- }
这个时候只会弹出 "red",因为阻止了事件冒泡。
3、事件捕获:
从顶层元素到目标元素或者从目标元素到顶层元素,和事件冒泡是一个相反的过程。事件从最不精确的对象 (document 对象) 开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。
- $input.addEventListener("click",
- function() {
- this.style.border = "5px solid red";
- alert("red")
- },
- true) $div.addEventListener("click",
- function() {
- this.style.border = "5px solid green";
- alert("green")
- },
- true) $body.addEventListener("click",
- function() {
- this.style.border = "5px solid yellow";
- alert("yellow")
- },
- true)
这个时候依次弹出 "yellow","green","red"。这就是事件的捕获。
如果把 addEventListener 方法的第三个参数改成 false,则表示只在冒泡的阶段触发,弹出的依次为:"red","green","yellow"。这是因为在 W3C 模型中,任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达了事件源元素。然后,再从事件源往上进行事件冒泡,直到到达 document。
程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过 addEventListener 函数,它有三个参数,第三个参数若是 true,则表示采用事件捕获,若是 false,则表示采用事件冒泡。
ele.addEventListener('click',doSomething2,true)
true = 捕获
false = 冒泡
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: