Skip to content

编写一个通用的事件监听函数

首先一个 html 结构代码

js
<button id="btn1">按钮</button>

实现事件绑定

js
// 事件绑定函数
function bindEvent(elem, type, fn) {
  elem.addEventListener(type, fn);
}
const btn1 = document.getElementById('btn1');
bindEvent(btn1, 'click', (event) => {
  console.log(event.target); // <button id="btn1">按钮</button>
  event.preventDefault(); // 阻止默认行为
  alert('clicked');
});

通用的事件监听函数

js
// 通用的事件绑定函数
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);
      }
    } else {
      // 普通绑定
      fn.call(target, event);
    }
  });
}
const btn1 = document.getElementById('btn1');
bindEvent(btn1, 'click', function (event) {
  //
  console.log(this.innerHTML); // 按钮
});

需要注意的是 this.innerHTML 的指向,此时不能是 event=>{} , 而需要使用 function(event){}

基于 MIT 许可发布