自定义绑定事件-一一网

前言：我们可以经常自己写一些 html 原生元素的监听事件，如果在这里封装为一个函数，
岂不是能大大提高咱们的工作效率。而且，封装函数作为高级程序员必备技巧，还不赶紧 get 起来！

业务需求描述：
需求一个函数，可以传入 3 / 4 个参数，elem, type, selector, cb ，其中 selector 可以不传，来灵活监听绑定事件。

talk is cheap ，show you the code.

// index.html
<body>
    <ul id="list">
		<li id="li1">项目1</li>
		<li id="li2">项目2</li>
		<li id="li3">项目3</li>
		<li id="li4">项目4</li>
                <button>click</button>
	</ul>
</body>
复制代码

如上，我们可以对单个 li 添加监听事件，或者对 ul 进行事件代理。

1、判断参数传入，如果第四个参数没有传，则把 selector 与 cb 交换。

const list = document.getElementById("list");

const li1 = document.getElementById("li1");

function bindEvent(elem, type, selector, cb) {
    console.log('cb: ', cb);
  if (cb === undefined) {
    cb = selector;
    selector = undefined;
  }
  console.log("elem : ", elem);
  console.log("type : ", type);
  console.log("sele : ", selector);
  console.log("cb : ", cb);
}

bindEvent(li1, "click", function (e) {
  alert(e.target.innerHTML);
});

bindEvent(list, "click", "li", function (e) {
  alert(e.target.innerHTML);
});

复制代码

可以看到这个已经实现了！

截屏2021-05-31 下午11.08.05.png

2、单个元素执行回调函数

function bindEvent(elem, type, selector, cb) {
    console.log('cb: ', cb);
  if (cb === undefined) {
    cb = selector;
    selector = undefined;
  }
  console.log("elem : ", elem);
  console.log("type : ", type);
  console.log("sele : ", selector);
  console.log("cb : ", cb);

  elem.addEventListener(type,(event) =>{
      cb(event)
  })
}

bindEvent(li1, "click", function (e) {
  alert(e.target.innerHTML);
});

bindEvent(list, "click", "li", function (e) {
  alert(e.target.innerHTML);
});

复制代码

这时点击 li1 可以看到事件触发了

3、事件代理

function bindEvent(elem, type, selector, cb) {
  if (cb === undefined) {
    cb = selector;
    selector = undefined;
  }

  elem.addEventListener(type,(event) =>{
      const target = event.target
      console.log('target: ', target);
      if(selector){
        //   if(target.matches(selector)){
        //       cb(event)
        //   }
        target.matches(selector) && cb(event)
      } else{
          cb(event)
      }
  })
}

bindEvent(li1, "click", function (e) {
  alert(e.target.innerHTML);
});

bindEvent(list, "click", "li", function (e) {
  alert(e.target.innerHTML);
});
复制代码

这是点击任一 li 都会触发对应回调函数，且点击 button 没有反应，实现成功

4、绑定 this

function bindEvent(elem, type, selector, cb) {
  if (cb === undefined) {
    cb = selector;
    selector = undefined;
  }

  elem.addEventListener(type,(event) =>{
      const target = event.target
      if(selector){
        //   if(target.matches(selector)){
        //       cb(event)
        //   }
        target.matches(selector) && cb.call(target,event)
      } else{
        cb.call(target,event)
      }
  })
}

bindEvent(li1, "click", function (e) {
  alert(this.innerHTML);
});

bindEvent(list, "click", "li", function (e) {
  alert(this.innerHTML);
});
复制代码

至此，封装代理函数就结束了，如果有收获的话，请个点个赞吧！

作者：chenuvi

邮箱： chenui@outlook.com

文章版权归作者所有，未经允许请勿转载。

THE END

前端