前端随心记---------Javascript系列(第十三节.DOM事件的三个阶段)
DOM事件的三个阶段
当一个DOM事件被触发时,不仅仅只是单纯的在本身对象触发一次,而且会经历三个不同的阶段;
1.捕获阶段: 先由文档的根节点document往事件触发对象,从外向内捕获事件对象,
2.目标阶段:到达目标事件位子,触发事件.
3.冒泡阶段:再从目标事件位子往文档的根节点方向回溯,从内向外冒泡事件对象.
事件委托
事件代理(Event Delegation),又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义,“事件代理”即是把原本需要绑定在子元素的响应事件(click、keydown......)委托给父元素,让父元素担当事件监听的职务。
事件代理的原理是DOM元素的事件冒泡。
委托事件的好处:
把某个事件加在父元素上,提高程序的执行效率动态创建的元素,可以在创建元素的函数体外部为其添加事件减少内存空间占用.
委托的机制: 利用事件冒泡 (不是所有的事件都能实现委托.)
获取事件源:
e.target || e.srcElement 高版本与兼容ie (由于在ie上为undefined所以需要兼容)
实现事件委托:
方式一:: 事件源.on+事件=function( ){ var e= e || event; var target=e.target || e.srcElement; if(target.nodeName.tolowerCase( )=="元素名"){ } } 方式二:: 事件源.addEventListener("事件",function( e ){ var e=e || event; var target=e.target || e.srcElement; if(target.nodeName.tolowerCase( )=="元素名"){ } });
集思广益,仅供学习,侵权即删!!