主页 / 网络编程 /

JavaScript事件委托原理与用法实例分析

网络编程 2021-07-04 16:45www.168986.cn编程入门
这篇文章主要介绍了JavaScript事件委托原理与用法,结合实例形式较为详细的分析了JavaScript事件流以及事件委托相关原理、用法与操作注意事项,需要的朋友可以参考下

本文实例分析了JavaScript事件委托原理与用法。分享给大家供大家参考，具体如下

在日常中，我们可能会听到事件委托这样的概念，有些同学可能对事件委托已经很了解了，也有些同学可能只是听过事件委托，只是会简单的使用，对于事件委托的原理不怎么知道。所以该博文会解释一下原生js的事件委托的原理，为什么会有事件委托，为什么可以这样用事件委托等等问题。

1. js中的事件流

在解析事件委托之前，我们先回顾一下js中的事件流，即冒泡和捕获。

① .冒泡当下级节点触发某个事件的时候，该事件会逐级向上触发上级节点的同类事件。

② .捕获和冒泡类似，只不过事件的顺序相反。即是从上级节点传递到下级节点

2. 事件委托原理

事件委托就是基于js的事件流产生的，事件委托是利用事件冒泡，将事件加在父元素或者祖先元素上，触发该事件。

<body>
  <div id="myDiv">
    <input type="button" value="按钮1" id="btn1">
    <input type="button" value="按钮2" id="btn2">
    <input type="button" value="按钮3" id="btn3">
  </div>
</body>
<script type="text/javascript">
  document.getElementById("myDiv").onclick=function(e){
    e=window.event||e;
    var btnId=e.target.id;
    switch(btnId){
      case "btn1":
        console.log("按钮1");
      break;
      case "btn2":
        console.log("按钮2");
      break;
      case "btn3":
        console.log("按钮3");
      break;
    }
  }
</script>

上面的代码就是一个典型的事件委托案例。利用的原理就是事件冒泡，将事件加载父元素上，通过event参数来区别按钮的不同

3.

通过对上面事件委托代码的观察，我们可以很容易得出事件委托的好处

① .减少页面绑定事件数量，由于页面事件绑定数量越多，页面执行性能越差，所以事件委托可以提高页面的性能

② .事件委托可以灵活的处理子节点动态变化的场景，无论子节点增加还是减少，事件都无需重新绑定

PS关于javascript事件说明可参考本站javascript事件与功能说明大全

更多关于JavaScript相关内容感兴趣的读者可查看本站专题《》、《》、《》、《》、《》、《》及《》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：JS实现同一DOM元素上onClick事件与onDblClick事件并存 下一篇：Angular5中调用第三方库及jQuery的添加的方法

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by