Javascript的事件委托实例(使用本地js和jQuery代码)
事件委托的原则依赖于事件冒泡。它可以通过委托父元素的事件来确定哪些子元素触发事件并执行一系列操作。使用事件委托的优点
1。操作则不必走过了一个个可根据由事件触发的操作对象。
DOM的结构如下所示:
当李被点击时,李的值被打印出来。
我们将通过所有的李,并添加一个单击事件给他们,如此,当我们还没有学习事件委托。
VaR阿里= document.getelementsbytagname(李的);
对于(var i = 0;i < ali.length; / /我+ +)李遍历
ALi {我}。addEventListener(听到咔哒声,功能){ / /(添加事件的每个李
(这console.log .innerHTML);
});
在学习事件委托之后,js本机代码如下所示:
VaR,= document.getelementbyid('oul);
OUl.addEventListener(听到咔哒声,功能(EV){
EV = EV | | window.event;
var标签= ev.target; / /触发事件的对象存储在事件目标。
console.log(标签。innerHTML);
})
jQuery代码如下所示:
$(#老),(点击'、'。项,函数()){
console.log($(this)。Html(这)); / /灵魂触发Click事件和类的项目元素
})
相比之下,事件委托只需要获取父元素,不需要遍历李,效率有很大提高。
2,在将事件委托给父元素后,它动态地创建和删除子元素,而不更新(绑定)事件,实现元素和事件的同步更新。
在过去的JS事件监控中,js没有动态创建事件,事件必须为它们重新绑定。但委派事件并不麻烦。没有事件重新绑定可以实现。
当然,事件绑定也是一个缺点,因为它依赖于事件气泡。如果我们不支持泡沫,我们不能实现的事件绑定,但我认为这种概率不高。有事件会在误判的发生,如网页的Button1和Button2的作用是点击弹出的值,而按钮的功能是点击页面颜色在三个按钮,同样的事件来实现不同的功能,当单击事件委托他们共同的父元素则会有假事件。
因此,我认为事件委托正在发生在同一功能下的一组子事件中,如果不是相同的话,不要使用事件委托,以免弄巧成拙。
在实际开发中,掌握事件对代码规范化和效率的约束将得到改进,一般来说,优点大于缺点。
上面的Javascript事件委托实例(附原始JS和jQuery代码)是所有萧边分享你的内容。我希望能给你一个参考,希望你能支持它。