js【详解】事件

给 DOM 节点绑定事件

推荐使用 addEventListener 函数

• 第一个参数：事件名称
• 第二个参数：事件处理函数（第一个参数为 event）
• 第三个参数：
  • true 采用捕获法来处理事件
  • false 【推荐】采用冒泡法来处理事件

let div1= document.getElementById('div1');
div1.addEventListener('click', function(event){
  alert('div1_clicked!');
}, false);

event 参数的用途

• event.target 获取触发事件的元素

• event.preventDefault() 阻止默认行为

  默认行为如：a标签点击跳转、鼠标右键弹出菜单、滑动滚轮控制滚动条等

• event.stopPropagation() 阻止事件传播（冒泡/捕获）

事件流（含事件冒泡，事件捕获）

https://blog.csdn.net/weixin_41192489/article/details/133140101

【必考】事件代理

借助其他元素来响应自身事件即事件代理。

应用范例：对于内容很多的列表，为了避免给每一个列表中的元素都绑定一个点击事件，仅在列表的容器元素上绑定点击事件，则当点击列表中的元素时，因事件冒泡机制，会触发容器元素的点击事件，再在该事件中，识别出点击的具体元素，并执行相应的处理。

// 列表内容很多的容器
const div3 = document.getElementById("div3");

// 点击列表中a标签的元素时，弹窗显示其内容
div3.addEventListener("click", (event) => {
  event.preventDefault();
  let target = event.target;
  if (target.nodeName === "A") {
    alert(target.innerHTML);
  }
});

【考题】写一个通用的事件绑定函数

/**
 * 通用的事件绑定函数(支持事件代理)
 * @param {*} elem      触发事件的元素
 * @param {*} type      事件类型
 * @param {*} selector  选择器
 * @param {*} fn        事件处理函数
 */
function bindEvent(elem, type, selector, fn) {
  //若只传入了三个参数（即普通的事件绑定），则第三个参数才是事件处理函数
  if (fn == null) {
    // 将第三个参数设置为事件处理函数
    fn = selector;
    // 将选择器置空
    selector = null;
  }
  // 绑定事件
  elem.addEventListener(type, (event) => {
    // 获取触发事件的元素
    const target = event.target;
    if (selector) {
      // 传入了选择器，则为事件代理绑定
      if (target.matches(selector)) {
        // 若触发事件的元素与选择器匹配，则执行事件处理函数
        fn.call(target, event); // 利用 call 改变事件处理函数中 this 的指向
      }
    } else {
      // 没有选择器，为普通事件绑定
      fn.call(target, event);
    }
  });
}

使用

// 普通事件绑定
const btn1 = document.getElementById('btn1')
bindEvent(btn1, 'click', function (event) {
    event.preventDefault()
    alert(this.innerHTML)
})

// 事件代理绑定
const div3 = document.getElementById('div3')
bindEvent(div3, 'click', 'a', function (event) {
    event.preventDefault()
    alert(this.innerHTML)
})

【考题】描述事件冒泡的流程

事件基于 DOM 树形结构顺着触发元素不断向上传播（由内层节点传播到外层节点），触发各级父辈节点对应的事件，若父辈节点中没有阻断事件的冒泡传播，则会一直传播到window 对象。

应用场景：事件代理（参考上文）

【考题】无限下拉图片列表，如何监听每个图片的点击

通过事件代理实现，具体逻辑如下：

• 在列表容器上绑定点击事件
• 点击图片时，会冒泡触发列表容器的点击事件
• 通过 e.target 获取到触发元素
• 通过 matches 判断触发元素是否是图片
• 是图片，则执行相应的代码，不是图片则不执行。