javascript事件委托_最外层div点击事件-优快云博客

本文详细介绍了事件委托的概念及其工作原理，对比了传统事件绑定的方法，阐述了如何使用原生JavaScript和jQuery来实现事件委托，并列举了事件委托的主要优点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

何为事件委托

再解释什么是事件委托之前，补充一下事件冒泡：

事件流：描述从页面接受事件的顺序，IE事件流为事件冒泡，而Netscape的事件流为事件捕获；
事件冒泡：事件开始从最具体的元素（文档中嵌套层次最低的那个节点）接受，然后逐级向上传播到较为不具体的节点。

事件委托利用事件冒泡原理，当触发嵌套较深的元素的时候，这个触发会冒泡到叫深的事件，例如页面中的某个div被点击，这个点击事件会冒泡到body，body也会被点击。利用这个特性，可以在嵌套较浅的元素绑定事件处理函数。具体做法如下：

<body>
  <div class="a">目标事件对象1</div>
  <div class="a">目标事件对象2</div>
  <div class="a">目标事件对象2</div>
 </body>

这里写图片描述

body下有三个div元素，想实现当点击任何一个div时候，都会弹出div is clicked

1. 传统的做法：需要通过遍历div，在每个div上依次绑定事件

       //传统做法
       var divs = document.getElementsByTagName('div');
       for (var i = 0; i < divs.length; i++){
         divs[i].addEventListener('click', function(){
            alert('div is clicked');
          });
       }

这种传统做法的弊端：绑定事件太过于繁琐；当在新添加了一个div时候，必须給新添加的这个div单独绑定事件，不然不会触发事件。

2. 原生javascript实现事件委托：

在父元素body上绑定事件，将事件委托给body监听：
利用事件对象event的target方法对事件触发的目标进行判断

 //原生方法实现事件委托          document.body.addEventListener('click',function(event){
        if (event.target.nodeName == 'DIV'){
            alert("div is click");
        }
     },false);

3. jQuery实现事件委托：

     //jQuery方法实现事件委托
       $(document.body).on('click', 'div', function() {
          alert('div is click');
       });

将目标对象的选择器传给on方法的第二个参数，即可实现事件委托。

事件委托的优点

1、不必一个一个依次給目标对象绑定事件，直接绑定在父元素上，操作更简单；
2、当新添加需要绑定的子元素时，不须单独給这个元素绑定，自动会有绑定事件。