首页 > 网络编程 > JavaScript > javascript技巧 > JS事件监听与事件委托

JS事件监听与事件委托举例详解(前端小白必学)

2024-07-17 09:56:26 作者：xuemen11

在JavaScript的学习中我们经常会遇到JavaScript的事件机制,例如,事件绑定、事件监听、事件委托(事件代理)等,下面这篇文章主要给大家介绍了关于JS事件监听与事件委托的相关资料,需要的朋友可以参考下

一.什么是事件监听？

在JavaScript中，事件监听是一种允许你响应用户操作或其他浏览器事件（如点击、键盘输入、页面加载等）的机制

在JS中若要进行事件的监听，dom元素发生驱动行为也可以使用事件绑定的方法，这种方法直观，但通常不推荐用于大型或复杂的项目中，因为它会导致HTML和JavaScript代码的混合，不利于代码的维护和分离。

举个例子（下面代码采用了事件绑定的方式对box这个dom元素进行点击行为）

 var box = document.querySelector(".box");
      // 2事件绑定   只执行最后一次
      box.onclick = function () {
        console.log("111");
      };
      box.onclick = function () {
        console.log("222");
      };
      box.onclick = function () {
        console.log("333"); //333
      };

在控制台点击了box这个dom元素，我们发现只打印输出了333这段代码。

为什么会出现这种情况呢？

在javaScript中给同个dom元素用事件绑定的方式对dom元素绑定多个行为，它会覆盖之前的驱动事件，只执行最后一次事件行为，这就是为什么只出现333，而不出现111，222的原因。

那么我们就可以使用（addEventListener）对事件进行监听，监听到的事件每一次都能执行。

box.addEventListener("click", function () {
        console.log("111"); //111
      });
      box.addEventListener("click", function () {
        console.log("222"); //222
      });
      box.addEventListener("click", function () {
        console.log("333"); //333
      });

在上面的代码中，在控制台的输出是111，222，333

二.理解嵌套关系的事件绑定和监听

//在html body内书写三个嵌套标签 
<div class="one">
      <div class="two">
        <div class="three"></div>
      </div>
    </div>
<script>
//获取标签
 var one=document.querySelector('.one')
      var two=document.querySelector('.two')
      var three=document.querySelector('.three')


   // 2)事件绑定  (从里往外依次执行事件)  three two one
      one.onclick=function(){
        console.log('one');
      }
      two.onclick=function(){
        console.log('two');
      }
      three.onclick=function(){
        console.log('three');
      }

      // 3)事件监听(第三个参数不填时默认是false,默认是事件冒泡) three two one
      one.addEventListener('click',function(){
        console.log('one');
      },false)
      two.addEventListener('click',function(){
        console.log('two');
      },false)
      three.addEventListener('click',function(){
        console.log('three');
      },false)

       // 输入的是true,则从外到内监听，属于捕获行为  one  two  three
      one.addEventListener('click',function(){
        console.log('one');
      },true)
      two.addEventListener('click',function(){
        console.log('two');
      },true)
      three.addEventListener('click',function(){
        console.log('three');
      },true)
</script>

可以看到在标签中one包着two,two包着three;点击three盒子，在事件绑定中，从里到外执行事件，先执行three、two、one。在事件监听中，不填false,默认是冒泡行为。输入的是true,从外到内监听，属于捕获行为。在控制台上输出是one、two、three

三.如何阻止事件捕获和事件冒泡？

1.事件捕获

// 4）阻止事件捕获  function要添加参数  one  two  three
      one.addEventListener('click',function(e){
        // 阻止事件捕获(阻止监听同一事件的其他事件监听器被调用)
        e.stopImmediatePropagation()
        console.log('one');
      },true)
      two.addEventListener('click',function(){
        console.log('two');
      },true)
      three.addEventListener('click',function(){
        console.log('three');
      },true)

2.事件冒泡

      // 5）阻止事件冒泡  //three two one
      one.addEventListener('click',function(){
        console.log('one');
      },false)
      two.addEventListener('click',function(){
        console.log('two');
      },false)
      three.addEventListener('click',function(e){
        // 阻止其他事件监听器被调用
        e.stopPropagation()

        console.log('three');
      },false)

四.什么是事件委托？

事件委托就是把原本要绑定在子元素上的事件绑定在父元素的身上，通过事件对象上的target属性去判断是哪一个子元素触发了事件，再进行相应的操作。使用事件委托可以减少dom操作，优化web性能，可以动态的对元素的添加和移除实现动态元素的绑定。

当子元素上的事件被触发时，由于事件冒泡机制，这个事件会冒泡到父元素或祖先元素，从而触发在父元素或祖先元素上设置的事件监听函数。然后，通过判断事件发生的元素DOM类型，父元素或祖先元素可以做出不同的响应。

<ol>
      <li class="active">导航1</li>
      <li>导航2</li>
      <li>导航3</li>
      <li>导航4</li>
      <li>导航5</li>
    </ol>
 <!-- 事件委托 本应该给li标签绑定事件的，结果给li标签的父元素或者祖先元素绑定事情 -->
    <script>
      // 获取ol标签
      var ol = document.querySelector("ol");
      // ol这个父元素绑定事件
      ol.onclick = function (event) {
        // 1.获取事件源
        var el = event.target;
        console.dir(el);
        // 2. 判断点击的标签是否为li标签,为li标签设置高亮
        if (el.tagName === "LI") {
          for (var j = 0; j < ol.children.length; j++) {
            ol.children[j].className = "";
          }
          el.className = "active";
        }
      };
</script>

在上面代码中对ol绑定了事件监听，可以通过target去获取事件源，事件对象就是触发事件所产生的数据集合。

如此一个tab选项卡就完成了

事件委托可以动态添加（添加了元素可以同样动态绑定了事件）

例子：

 // 事件委托可以动态添加
      // 创建一个li标签
      var li = document.createElement("li");
      li.innerHTML = "导航6";
      ol.appendChild(li);

如此，动态添加的导航6元素就可以使用ol所绑定的事件啦。

事件委托的好处？

1.提高性能：事件委托通过减少需要绑定的事件监听器的数量，来优化性能。只需在父级或祖先元素上添加一个事件处理程序，就可以管理其所有后代元素上的同一类型事件，这样就降低了内存占用。

2.动态监听：对于动态添加到页面中的元素，由于它们的事件监听器是绑定在父级或祖先元素上的，因此这些新元素也能自动获得事件监听功能，无需重新绑定事件。

3.避免内存泄漏：在低版本的IE浏览器中，如果删除元素而没有移除事件监听器，可能会导致内存泄漏。而使用事件委托，由于事件监听器是绑定在父级或祖先元素上的，即使子元素被删除，也不会影响事件监听器的存在，从而避免了内存泄漏的问题。

事件委托是一种强大且灵活的事件处理机制，特别适用于需要处理大量相似元素或动态添加元素的情况。

总结

到此这篇关于JS事件监听与事件委托举例详解的文章就介绍到这了,更多相关JS事件监听与事件委托内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！