JS中如何实现事件委托
这篇文章主要介绍了JS中如何实现事件委托,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
事件委托(也叫事件代理),其实这个问题也简单,要想弄明白事件委托,我们先要把事件冒泡的机制搞清楚。举个事件冒泡的例子:
<ul>
<li>点击</li>
</ul>
<script>
var ul=document.getElementsByTagName('ul')[0];
var li=document.getElementsByTagName('li')[0];
ul.addEventListener('click', function(){
alert('我是ul,我被点击了');
}, false);
li.addEventListener('click', function(){
alert('我是li,我被点击了');
}, false);
</script>
在这段代码中,当我们点击li的时候出发了li的click事件,但是在这时,ul的click事件也被触发了,这就是事件的冒泡。搞明白这个之后,我们就可以来说事件委托了,既然事件能从子元素(li)冒泡的父元素(ul)身上,那么我们就可以给ul自己加一个click事件,把所有li的事件都委托给了我们的父级(ul)身上,可能到这里有些朋友还是不明白这个事件委托到底有什么用,我们在举一个事件委托的实例来说明一下:
<ul>
<li>点击1</li>
<li>点击2</li>
<li>点击3</li>
<li>点击4</li>
<li>点击5</li>
</ul>
<script>
//使用事件委托的代码
var ul=document.getElementsByTagName('ul')[0];
ul.addEventListener('click', function(e){
alert(e.target.innerHTML);
}, false);
//不使用事件委托,循环给li添加click事件
var li=document.getElementsByTagName('li')
for(var i=0;i<li.length;i++){
li[i].onclick=function(){
alert(this.innerHTML);
}
}
</script>
我们以上代码把事件委托给了ul,只给ul增加点击事件,在浏览器中运行点击对应的li会弹出li对应的innerHTML
,这个function(e){};
中的e这个参数实际上就是当前我们点击li时,系统传给我们的一些事件信息,e.target
实际上指的就是当前我们点击的这个li,在这里我们每次弹出的都是当前点击对象的innerHTML
,这就是一个简单的事件委托的案例。
而事件委托对于我们优化代码意义是非常大的,我们都知道,频繁的dom操作是非常耗费性能的,现在ul里边是5个li,我们假如不用事件委托实现上面代码所作的事情,就需要用for循环,给每个li都写一个click事件,这样一来dom操作就比较多了,如果是10个li呢,100个甚至更多呢,单不说dom操作影响的性能,li过多for循环自身就会占用大量的事件。如果利用事件委托,既避免了for循环耗费的性能,又省去了繁多的dom操作耗费的性能。
感谢你能够认真阅读完这篇文章,希望小编分享的“JS中如何实现事件委托”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网行业资讯频道,更多相关知识等着你来学习!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341