共计 1170 个字符，预计需要花费 3 分钟才能阅读完成。
文章不易，请关注公众号 毛毛虫的小小蜡笔，多多反对，谢谢。
DOM 事件触发程序
遵循两个准则：
1、先触发捕捉阶段，而后到指标阶段，最初到冒泡阶段
2、指标阶段，依照代码程序来触发，不辨别捕捉和冒泡
Demo
代码
| <head> | |
| <meta charset="utf-8"> | |
| <title> 事件流 </title> | |
| <style> | |
| #a { | |
| width: 100px; | |
| height: 100px; | |
| background: black; | |
| margin: auto; | |
| } | |
| #b { | |
| width: 60px; | |
| height: 60px; | |
| background: red; | |
| } | |
| #c { | |
| width: 30px; | |
| height: 30px; | |
| background: green; | |
| display: inline-block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="a"> | |
| <div id="b"> | |
| <div id="c"></div> | |
| </div> | |
| </div> | |
| <script> | |
| var aObj = document.getElementById('a') | |
| var bObj = document.getElementById('b') | |
| var cObj = document.getElementById('c') | |
| aObj.addEventListener('click', function (evt) {console.log('a1') | |
| }, true) | |
| aObj.addEventListener('click', function (evt) {console.log('a2') | |
| }, false) | |
| bObj.addEventListener('click', function (evt) {console.log('b1') | |
| }, true) | |
| bObj.addEventListener('click', function (evt) {console.log('b2') | |
| }, false) | |
| cObj.addEventListener('click', function (evt) {console.log('c1') | |
| }, true) | |
| cObj.addEventListener('click', function (evt) {console.log('c2') | |
| }, false) | |
| cObj.addEventListener('click', function (evt) {console.log('c3') | |
| }, true) | |
| cObj.addEventListener('click', function (evt) {console.log('c4') | |
| }, false) | |
| </script> | |
| </body> |
成果如下截图所示：
当点击绿色区域，输入程序是这样的：a1,b1,c1,c2,c3,c4,b2,a2
其实，依据下面说的准则来判断就能够。
1、先触发捕捉阶段，所以先输入 a1 和 b1
详情 请查看：毛毛虫的小小蜡笔
正文完
