js事件流
1.事件流模型
js的事件流有两种，即两种不同的流向。一是冒泡模型，而是捕获模型。
事件冒泡是指从最具体的节点开始向外（父元素）传播至到最宽泛的节点。这是事件流的默认模型，被大多数浏览器所支持。
事件捕获从最宽泛的节点开始向内（子节点）传播到最具体的节点。这种方式在IE8及更早的版本的IE中不被支持。
图1 事件冒泡模型
图2 事件捕获模型
2.具体示例
代码
1 | `<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>js事件流</title> <style> ul{ border:8pxsolid red; } li{ border:4pxsolid black; } a{ border:2pxsolid blue; } </style> </head> <body> <ul onclick="ulClick()"> <li onclick="liClick()"> <a onclick="aClick()">连接</a> </li> </ul> <script> function ulClick(){ alert("我是ul的事件") } function liClick(){ alert("我是li的事件") } function aClick(){ alert("我是a的事件") } </script> </body> </html>` |
结果
3.P.S.
1)、只有当一个元素及其父元素或者子元素都有时间存在时，事件流才会凸显的非常重要，否则不需要注意事件流。
2)、对于传统的DOM事件处理程序（以及HTML事件属性），所有的现代浏览器默认都会使用事件冒泡模型而不是事件捕获模型。
3)、使用事件监听器时，addEventListener()方法的最后一个参数允许选择事件触发的方向：
-
true：表示捕获的方式
-
false：表示冒泡方式
4)、最好使用冒泡方式，因为IE8及及更早的版本的IE中不支持捕获方式。
参考书籍
《JavaScript&jQuery交互式Web前端开发》