时间:2021-05-26
本文实例讲述了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操作耗费的性能。
PS:关于javascript事件说明可参考本站javascript事件与功能说明大全:http://tools.jb51.net/table/javascript_event
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
其所谓的动态添加事件实质就是指js中的事件委托。我们知道在js中,事件处理只能绑定在当前被选中的元素上,换句话也就是说,事件处理只能绑定在当前文档已经存在的元素
本文实例讲述了JavaScript事件委托用法。分享给大家供大家参考。具体分析如下:一、点击页面任何部分触发事件创建一个script1.js文件。复制代码代码如
通常来说当一个被监视对象的方法执行会触发观察者Observer的方法的时候,我们就可以在被监视对象中声明委托和事件。本文就以实例形式展示了C#中实现委托和事件在
今天聊下JavaScript中的事件委托跟深浅拷贝一、事件委托首先呢,介绍一下事件绑定//方法一:通过onclick点击functionclickEvent()
前言窗体间的传值,最好使用委托方式传值,开始之前,我们先来说一下委托与事件的关系。委托:是一个类。事件:是委托类型的一个特殊实例,只能在类的内部触发执行。首先创