封装事件监听函数

巴拉巴拉小魔仙_

已于 2022-01-26 21:40:26 修改

阅读量927

点赞数

分类专栏： JS 文章标签： javascript

于 2022-01-26 21:02:43 首次发布

本文链接：https://blog.csdn.net/m0_66637749/article/details/122708615

版权

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

利用事件冒泡的机制，把事件绑定到父元素上，适用于瀑布流场景，可以减少浏览器的内存占用。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>事件</title>
</head>

<body>
  <div>
    <button id="btn">按钮</button>
    <ul id="divBox">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>

  <script src="./event.js"></script>
</body>

</html>

function bindEvent(ele, type, selector, fn) {
  if (fn == null) {
    fn = selector;
    selector = null;
  }
  ele.addEventListener(type, event => {
    const target = event.target;
    if (selector) {
      // 代理绑定
      if (target.matches(selector)) { // 判断一个DOM元素是不是符合于选择器
        fn.call(target, event); // call方法可以改变this指向
      }
    } else {
      // 普通绑定
      fn.call(ele, event);
    }
  })
}

// 普通绑定
const btn = document.getElementById('btn');
bindEvent(btn, 'click', function (e) { // 这里不能用箭头函数，否则函数里的 this 指向的是上级作用域的this，即window
  e.preventDefault();
  console.log(this);
  alert(this.innerText);
})

// 代理绑定
const div = document.getElementById('divBox');
bindEvent(div, 'click', 'li', function (e) {
  e.preventDefault();
  alert(this.innerText);
})