js面试|手写一个通用事件监听函数
在准备js面试题时，遇到了许多知识盲区，或是已经遗忘的知识，所以来写一下博客，记录自己的成长，同时查漏补缺
这次来写一个通用的事件监听函数，基于我们的事件冒泡，如果你不知道事件冒泡
需求，点击每个a，返回对应的内容
激活
取消
取消
取消
激活
取消
取消
取消
先封装一个函数，看代码
function bindEvent(elem, type, fn) {
elem.addEventListener(type,fn)
}
//调用时，如
bindEvent(div,'click',function(){})是这样吗？当然不是，要是这么简单那面试时就没什么可问的了
【js面试|手写一个通用事件监听函数】我们写的要考虑上事件代理这个情况让这个函数可以使用事件代理，也可以不用事件代理
function bindEvent(elem, type, selector, fn) {
//判断一下，如果我们只传入三个值，那就是普通函数
//如果是传入四个参数，那就是使用事件代理
//selector是我们要代理的对象，如果没有，那就不是使用事件代理
if(fn == null) {
fn = selector
selector = null
}
elem.addEventListener(type, function(e) {
const target = e.target
if(selector) {
//使用事件代理
if(target.matches(selector)) {
//这matches主要是用来判断当前DOM节点是否能完全匹配对应的CSS选择器规则；
//如果匹配成功，返 回true，反之则返回false
//可以理解为当我们传入的selector===target.nodeName，返回true，否则false
fn.call(target, e)
//使用call函数，方便我们使用this指向我们点击的元素
}
}else {
//普通调用
fn.call(target, e)
}
})
}
使用代理时
bindEvent(div1,'click','a',function() {
alert(this.innerHTML)
})
//点击每个a时，都可以alert出a的值使用普通函数时
bindEvent(div1,'click',function(e) {
const target = e.target
if(target.nodeName === 'A') {
alert(target.innerHTML)
}
})
//点击每个a时，都可以弹出相对应的值推荐阅读
- 一个人的旅行，三亚
- 一个小故事，我的思考。
- 一个人的碎碎念
- 七年之痒之后
- 我从来不做坏事
- 异地恋中，逐渐适应一个人到底意味着什么（）
- 迷失的世界（二十七）
- live|live to inspire 一个普通上班族的流水账0723
- 遗憾是生活的常态，但孝顺这件事，我希望每一个人都不留遗憾
- NO.38|NO.38 我不是嫁不出去，而是不想嫁