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>

分享标题：JavaScript事件委托原理与用法实例分析-创新互联
分享路径：https://www.cdcxhl.com/article30/dsddso.html

成都网站建设公司_创新互联，为您提供移动网站建设、定制网站、软件开发、外贸建站、网站内链、网站营销

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容