js中的事件委托
来源:互联网 发布:vue nginx 跨域 编辑:程序博客网 时间:2024/06/13 11:12
1,什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。
也就是:利用冒泡的原理,把事件加到父级上,触发执行效果。
好处呢:1,提高性能。
我们可以看一个例子:需要触发每个li来改变他们的背景颜色。
<ulid="ul"><li>aaaaaaaa</li><li>bbbbbbbb</li><li>cccccccc</li></ul>
window.onload = function(){var oUl = document.getElementById("ul");var aLi = oUl.getElementsByTagName("li");for(var i=0; i<aLi.length; i++){aLi[i].onmouseover = function(){this.style.background = "red";}aLi[i].onmouseout = function(){this.style.background = "";}}}
这样我们就可以做到li上面添加鼠标事件。
但是如果说我们可能有很多个li用for循环的话就比较影响性能。
下面我们可以用事件委托的方式来实现这样的效果。html不变
window.onload = function(){var oUl = document.getElementById("ul");var aLi = oUl.getElementsByTagName("li");/*这里要用到事件源:event 对象,事件源,不管在哪个事件中,只要你操作的那个元素就是事件源。ie:window.event.srcElement标准下:event.targetnodeName:找到元素的标签名*/oUl.onmouseover = function(ev){var ev = ev || window.event;var target = ev.target || ev.srcElement;//alert(target.innerHTML);if(target.nodeName.toLowerCase() == "li"){target.style.background = "red";}}oUl.onmouseout = function(ev){var ev = ev || window.event;var target = ev.target || ev.srcElement;//alert(target.innerHTML);if(target.nodeName.toLowerCase() == "li"){target.style.background = "";}}}
好处2,新添加的元素还会有之前的事件。
我们还拿这个例子看,但是我们要做动态的添加li。点击button动态添加li
如:
<inputtype="button"id="btn" /><ulid="ul"><li>aaaaaaaa</li><li>bbbbbbbb</li><li>cccccccc</li></ul>
不用事件委托我们会这样做:
window.onload = function(){var oUl = document.getElementById("ul");var aLi = oUl.getElementsByTagName("li");var oBtn = document.getElementById("btn");var iNow = 4;for(var i=0; i<aLi.length; i++){aLi[i].onmouseover = function(){this.style.background = "red";}aLi[i].onmouseout = function(){this.style.background = "";}}oBtn.onclick = function(){iNow ++;var oLi = document.createElement("li");oLi.innerHTML = 1111 *iNow;oUl.appendChild(oLi);}}
这样做我们可以看到点击按钮新加的li上面没有鼠标移入事件来改变他们的背景颜色。
因为点击添加的时候for循环已经执行完毕。
那么我们用事件委托的方式来做。就是html不变
window.onload = function(){var oUl = document.getElementById("ul");var aLi = oUl.getElementsByTagName("li");var oBtn = document.getElementById("btn");var iNow = 4;oUl.onmouseover = function(ev){var ev = ev || window.event;var target = ev.target || ev.srcElement;//alert(target.innerHTML);if(target.nodeName.toLowerCase() == "li"){target.style.background = "red";}}oUl.onmouseout = function(ev){var ev = ev || window.event;var target = ev.target || ev.srcElement;//alert(target.innerHTML);if(target.nodeName.toLowerCase() == "li"){target.style.background = "";}}oBtn.onclick = function(){iNow ++;var oLi = document.createElement("li");oLi.innerHTML = 1111 *iNow;oUl.appendChild(oLi);}}
ok:
如同在我们用微博中,新发微博照样有之前的鼠标事件。
0 0
- js中的事件委托
- js中的事件委托
- js中的事件委托
- js中的事件委托
- js中的事件委托
- js中的事件委托
- js中的事件委托
- js中的事件委托
- JS中的事件委托
- js中的事件委托
- js中的事件委托
- Js中的事件委托
- js中的事件委托
- JS中的事件委托
- JS中的事件委托
- JS中的事件委托机制
- js中的事件委托总结
- js中的事件委托技术
- Cocos2d-x引入中文支持库并移植到android平台
- Cube Stacking(并查集)
- 关于java的一些易错知识
- 道可道,非常道
- 富文本web编辑器--ueditor的使用
- js中的事件委托
- linux内核编译kernel编译
- c++面试题(2)
- HDOJ 1019 Least Common Multiple(最小公倍数问题)
- asp.net 结合mysql存储过程进行分页代码
- mysql保障数据一致性:锁与解(一)
- MyBatis核心对象的生命周期与封装
- js之事件冒泡和事件捕获详细介绍
- servlet+jsp实现的文件上传与下载