当前位置:Gxlcms > JavaScript > js事件委托是什么?使用js事件委托的好处有哪些?

js事件委托是什么?使用js事件委托的好处有哪些?

时间:2021-07-01 10:21:17 帮助过:8人阅读

js事件委托是什么?使用事件委托又有哪些好处?相信很多的朋友或许会有这样的疑问,那么,接下来的这篇文章就给大家来说一说关于js事件委托的概念以及使用js事件委托的好处。

1、什么是js事件委托?

利用事件冒泡处理动态元素事件绑定的方法,专业术语叫事件委托,简单点来说就是给父元素绑定事件,用来监听子元素的冒泡事件,并找到是哪个子元素的事件,更加通俗一点那就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。(事件有哪些?请看:JavaScript中文参考手册)

比如下面这个例子:原生js实现事件委托

<!DOCTYPE html>
<html>
<head>
<title>事件委托测试</title>
</head>
<body>
<style type="text/css">
*{margin: 0;padding: 0;}
a{text-decoration: none;}
ul,li{list-style: none;}
div{display: block;width: 500px;padding: 200px 0 0 200px;}
div ul li{display: block;width: 100%;text-align: center;height: 35px;line-height: 35px;}
div ul li:nth-child(2n){background: #f00;}
</style>
<div>
    <ul>
        <li><a>测试1</a></li>
        <li><a>测试2</a></li>
        <li><a>测试3</a></li>
        <li><a>测试4</a></li>
        <li><a>测试5</a></li>
        <li><a>测试6</a></li>
        <li><a>测试7</a></li>
        <li><a>测试8</a></li>
    </ul>
</div>
<script type="text/javascript">
document.getElementsByTagName("ul")[0].addEventListener('click',function(e){
    alert("点击的内容是:"+e.target.innerHTML);
});
</script>
</body>
</html>

注意:js实现事件委托有三个步骤:

第一步:给父元素绑定事件
给元素ul添加绑定事件,通过addEventListener为点击事件click添加绑定

第二步:监听子元素的冒泡事件
这里默认是冒泡,点击子元素li会向上冒泡

第三步:找到是哪个子元素的事件

通过匿名回调函数的参数e用来接收事件对象,通过target获取触发事件的目标

2、js事件委托的好处:

事件委托的好处1:事件委托技术可以避免对每个字元素添加事件监听器,减少操作DOM节点的次数,从而减少浏览器的重绘和重排,提高代码的性能。

我们可以看一个例子:我们要做动态的添加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);
  }
}

事件委托的好处2:使用事件委托,只有父元素与DOM存在交互,其他的操作都是在JS虚拟内存中完成的,这样就大大提高了性能。

相关推荐:

js中的事件委托

javascript事件委托和jQuery事件绑定on、off 和one

以上就是js事件委托是什么?使用js事件委托的好处有哪些?的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行