JS 事件绑定监听、事件委托详解_document.getelementbyclassname 添加监听-优快云博客

本文链接：https://blog.youkuaiyun.com/ForeverNagisa/article/details/79532202

本文详细介绍了事件监听的绑定、移除及事件阶段，并通过实例解释了如何利用事件委托提高JavaScript性能，减少内存使用。

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

事件绑定

事件监听绑定的应用场景

// 获取元素
    var wrap = document.getElementsByClassName("wrap")[0]
    wrap.onclick = function() {
      console.log(1);
    }
    wrap.onclick = function() {
      console.log(2);
    }
     //  当鼠标点击div时候 程序只会执行后面一个 使用事件绑定就能解决这个问题

格式: element.addEventListener(event, function, useCapture)
type:事件名，支持所有 DOM事件
function:函数名
useCapture:指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false

代码举例:

// 获取元素
    var wrap = document.getElementsByClassName("wrap")[0]
    wrap.addEventListener("click", fun1)
    wrap.addEventListener("click", fun2)

    function fun1() {
      console.log(1);
    }

    function fun2() {
      console.log(2);
    }
    // 两个点击事件都会执行

事件绑定移出

格式:document.removeEventListener(“event”, function);

wrap.removeEventListener("click", fun1);
// 解除了fun1的点击事件 fun2的正常执行

事件监听事件阶段

w3c 规定了事件监听的三个阶段分别是:捕获阶段、目标阶段、冒泡阶段。
捕获阶段:事件从根节点流向目标节点在流向目标节点时捕获全部事件直至目标节点
目标阶段 :事件会在目标节点上触发
冒泡阶段:目标节点触发后向上冒泡最终回到根节点

这里写图片描述

代码举例:

    var big = document.getElementsByClassName("big")[0]
    var middle = document.getElementsByClassName("middle")[0]
    var small = document.getElementsByClassName("small")[0]
    big.addEventListener("click", fun1)
    middle.addEventListener("click", fun2)
    small.addEventListener("click", fun3)
    function fun1() {
      console.log("big");
    }
    function fun2() {
      console.log("middle");
    }
    function fun3() {
      console.log("small");
    }
    // 三个div依次从大到小叠加 点击最上层 依次打印出 small middle  big
    // 如果在addEventListener 将默认的useCapture = false 改为true 点击最上层 依次打印出 big middle  small

事件委托

事件委托主要是用来提高JavaScript性能减少内存使用

代码举例:

var big = document.getElementsByClassName("big")[0]
    var middle = document.getElementsByClassName("middle")[0]
    var small = document.getElementsByClassName("small")[0]
    document.addEventListener("click", function(ev) {
      var target = ev.target
      if (target == big) {
        console.log("big");
      } else if (target == middle) {
        console.log("middle");
      } else if (target == small) {
        console.log("small");
      }
    })
    // 点击div 输出相应标签名