好程序员网络前端教程 JavaScript ,今天来聊一聊事件的执行机制。
什么是事件的执行机制呢?
思考一个问题?
当一个大盒子嵌套一个小盒子的时候,并且两个盒子都有点击事件
你点击里面的小盒子,外面的大盒子上的点击事件要不要执行
<强>
-
<李>
李
<李>
李
<李>
,
<强>
<李>
<强>
<李>
李
<李>
李
<李>
李
<李>
身体,身体上,也会触发的点击事件李
<李>
,html上,也会触发html的点击事件李
<李>
文档,文档上,也会触发的点击事件李
<李>
,窗口上,也会触发窗口的点击事件李
<李>
,窗口的相同事件触发,前提是各层级元素得有注册相同的事件,不然不会触发
,
-
<李>
-
<李>
李
<李>
,html的结构逐层向上元素的事件会被触发李
<李>
,
-
<李>
李
<李>
,窗口的所有相同事件都会触发李
<李>
,窗口的每一个元素身上李
<李>
李,窗口身上呢
<李>
,窗口的事件处理函数
<李>
,窗口的事件处理函数,逐层向下最后执行自己身上的事件处理函数
<李>
,窗口,有可能要执行多个同类型事件
<李>
李
<李>
,
<强>
强,就是什么李
<李>
,
<强>
强,的事件处理函数开始,依次向外,直到窗口的事件处理函数触发
<李>
李
<李>
,窗口的事件处理函数开始,依次向内,只要事件,
<强>
强,的事件处理函数执行
<李>
李
<李>
李
<李>
李
<李>
李
<李>
李
<李>
<强>
<强>
<强>
<强>
<强>
<强>
<强>
& lt; body>
,, & lt; ul>
,,,, & lt; li> 1 & lt;/li>
,,,, & lt; li> 2 & lt;/li>
,,,, & lt; li> 3 & lt;/li>
,, & lt;/ul>
,, & lt; script>
,,,, <强> var ,oUl <强>=,docuemnt.querySelector (& # 39; ul # 39;)
,,,, oUl.addEventListener(& # 39;点击# 39;,, <强>函数,(e), {
,,,,,, console.log(& # 39;我是ul的点击事件,我被触发了& # 39;)
,,,,})
,, & lt;/script> & lt;/body>
-
<李>
,ul的时候肯定会触发李
<李>
,李的时候,其实也会触发李
<李>目标这个属性是事件对象里面的属性,表示你点击的目标李
<李>
李就目标是哪个元素
<李>
,目标也不兼容,在IE下要使用srcElement李
目标
& lt; body>
,, & lt; ul>
,,,, & lt; li> 1 & lt;/li>
,,,, & lt; li> 2 & lt;/li>
,,,, & lt; li> 3 & lt;/li>
,, & lt;/ul>
,, & lt; script>
,,,, <强> var ,oUl <强>=,docuemnt.querySelector (& # 39; ul # 39;)
,,,, oUl.addEventListener(& # 39;点击# 39;,, <强>函数,(e), {
,,,,,, e <强>=,e <强> | | ,window.event
,,,,,, <强> var ,target <强>=,e.target <强> | | ,e.srcElement
,,,,,, console.log(目标)
,,,,})
,, & lt;/script> & lt;/body>
-
<李>
,ul的时候,目标就是ul李
<李>
,李上面的时候,目标就李是李
<李>
,李的时候,也可以触发ul的点事件李
<李>
李,ul还是李
<李>
,李的事件委托给ul来做李
<强>
& lt; body>
