导读 摘要 今天小编跟大家讲解下有关浏览器事件之事件流 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关浏览器事件之事件流 的...
摘要 今天小编跟大家讲解下有关浏览器事件之事件流 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关浏览器事件之事件流 的相关资 今天小编跟大家讲解下有关浏览器事件之事件流 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关浏览器事件之事件流 的相关资料,希望小伙伴们看了有所帮助。
介绍事件流描述的是从页面中接收事件的顺序。但是IE和Netscape却提出了两个完全相反的事件流 分别是事件冒泡流和事件捕获流。
事件冒泡IE的事件流称为事件冒泡 从最具体的元素开始 然后逐渐向上传播到文档节点。如下图:
我们以下面代码展示事件冒泡:
<!DOCTYPE html><html> <body> <button id="myButton">点击按钮</button> </body> <script> document.getElementById('myButton').addEventListener( 'click', function(ev) { alert(1); }, false ); document.body.addEventListener( 'click', function(ev) { alert(2); }, false ); document.addEventListener( 'click', function(ev) { alert(3); }, false ); </script></html>addEventListener()为DOM2级事件处理程序 它接受三个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true 表示在捕获 阶段调用事件处理程序;如果是 false 表示在冒泡阶段调用事件处理程序。上面代码中会先后弹出3次alter弹窗 顺序分别为1、2、3。也就是说 click事件首先在<div>元素上发生 而这个元素就是我们单击的元素。然后 click 事件沿DOM树向上传播 在每一级节点上都会发生 直至传播到document对象。
事件捕获和事件冒泡相反的事件流则称为事件捕获 由Netscape Communicator团队提出。事件捕获由文档节点开始传播一直到最具体的元素。如下图:
具体代码如下:
<!DOCTYPE html><html> <body> <button id="myButton">点击按钮</button> </body> <script> document.getElementById('myButton').addEventListener( 'click', function(ev) { alert(1); }, true ); document.body.addEventListener( 'click', function(ev) { alert(2); }, true ); document.addEventListener( 'click', function(ev) { alert(3); }, true ); </script></html>上面代码中会先后弹出3、2、1的结果 和事件冒泡完全相反。
DOM事件流到了“DOM2级事件”标准中规定 事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。先后顺序如下图:
我们还是以代码为例
<!DOCTYPE html><html> <body> <button id="myButton">点击按钮</button> </body> <script> // 冒泡阶段处理 document.getElementById('myButton').addEventListener( 'click', function(ev) { alert(1); }, false ); // 捕获阶段处理 document.body.addEventListener( 'click', function(ev) { alert(2); }, true ); // 冒泡阶段处理 document.addEventListener( 'click', function(ev) { alert(3); }, false ); </script></html>在代码中 把<body>元素的点击事件处理放在了捕获阶段 而把<buttom>和document的点击事件处理放在了冒泡阶段 按照DOM事件流事件的传播顺序为
(1)<body>
(2)<button>
(3)document
所以最终的弹出结果为 2、1、3。
The Last现在 IE9、Opera、Firefox、Chrome 和 Safari 都支持 DOM 事件流。
来源:爱蒂网
版权声明:本文由用户上传,如有侵权请联系删除!