事件就是 onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件,本文给大家重点介绍 js 中的事件委托及好处,一起看看吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
1,什么是事件委托:通俗的讲,事件就是 onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。
也就是:利用冒泡的原理,把事件加到父级上,触发执行效果。
好处呢:1,提高性能。
我们可以看一个例子:需要触发每个 li 来改变他们的背景颜色。
- <ul id="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 不变
好处 2,新添加的元素还会有之前的事件。
我们还拿这个例子看,但是我们要做动态的添加 li。点击 button 动态添加 li
如:
- <input type="button" id="btn" />
- <ul id="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:
如同在我们用微博中,新发微博照样有之前的鼠标事件。
以上所述是小编给大家介绍的 JavaScript 中的事件委托及好处,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0303/264319.html