正在回答
2回答
同学你好,事件从外往里执行的是捕获,从里到外执行的是冒泡,在这个阶段先做一下简单的了解即可,因为这个阶段是属于入门,太深入的内容可能不太容易理解,后面第三阶段深入的js部分会做详细的讲解。
祝学习愉快!
山河远阔ZZ
2019-02-13 15:15:28
同学你好,可以参考下面例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE html> < html > < head > < meta charset = "UTF-8" > < title >Document</ title > < style > div { border: 1px solid red; } </ style > </ head > < body > < div id = "one" > one < div id = "two" > two < div id = "three" >three</ div > </ div > </ div > </ body > < script > var one = document.getElementById('one'), two = document.getElementById('two'), three = document.getElementById('three'); three.onclick = function() { alert("three") } two.onclick = function() { alert("two") } one.onclick = function() { alert('one') } </ script > </ html > |
事件冒泡:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。
当点击three标签的时候,先执行了three的函数,在往上执行了two的函数,又执行了one的函数。
当点击了two标签的时候,先执行了two的函数,再往上又执行了one的函数。
可以测试一下,如果帮助到了你,欢迎采纳。
祝学习愉快!
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧