场景:1 1 <div > 2 click me div1 3 <div >click me div2</div> 4 </div> 5 6 $(".div2").on(click,function ...
场景:1
1 <div > 2 click me div1 3 <div >click me div2</div> 4 </div> 5 6 $(".div2").on('click',function(){ 7 alert($(this).attr('class')) 8 }) 9 10 $(".div1").on('click',function(){11 alert($(this).attr('class'))12 })
Netcape认为因为div2在div1的内部,点击div2后,点击事件应该从div1传递,先触发div1上的事件处理函数,随后点击事件传递到div2上的事件处理函数。
事件捕获过程:
| |---------------| |-----------------| div1 | | || -----------| |----------- || |div2 \ / | || ------------------------- || 事件捕获 |-----------------------------------
针对这两种情况,W3C在定义dom 事件模型的时候,采取了一个折中的方法。在W3C事件模型中,事件的传播顺序应该从事件捕获阶段为始到事件冒泡阶段结束为终。
| | / \-----------------| |--| |-----------------| div1 | | | | || -------------| |--| |----------- || |div2 \ / | | | || -------------------------------- || W3C 事件模型 |------------------------------------------
那么问题来了,作为开发人员如何在这种相对比较复杂的环境下来限制事件的传播顺序,从而实现事件绑定的预期效果。
原生js实现方式
element.addEventListener("事件类型",“事件处理函数”,“事件顺序”)
事件顺序=true
事件处理函数在捕获阶段执行
事件顺序 =false
事件处理函数在冒泡阶段执行
事件委托
什么是事件委托?利用事件冒泡或者事件捕获原理,如果点击div1,div1自身不处理事件,而是将处理任务委托给父级元素或者祖先元素甚至根节点元素来处理。
运行:https://jsfiddle.net/Mr_do/22wtxxj5/7/
1 <div id="divItem"> 2 3 <div > 4 div1 5 </div> 6 7 <div > 8 div2 9 </div>10 11 <div >12 div313 </div>14 15 </div>16 17 18 19 $("#divItem").delegate('div','click',function(e){20 alert($(this).attr('class'))21 })
原标题:事件冒泡、事件捕获、事件委托初探
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。