之前学习总是遇到问题再去研究表面知识,这是不可取的,在这里我们来写一个绑定事件的函数,以此巩固我们对
JS事件
相关知识点的理解
在这里我会解释一下各个参数之间的关系
function bindEvent(elem, type, selecter, fn) {
if (fn == null) {
//判断一下selecter这个参数是否存在
fn = selecter
selecter = null
}
elem.addEventListener(type, function (e) {
//代理
if (selecter) {
//代理
var target = e.target
if (target.matches(selecter)) {
//这里target代表出发事件的节点,是否和你传的selecter相匹配
fn.call(target, e)
}
} else {
//
fn(e)
}
})
}
例:我希望给div1里面的a标签绑定事件,但div1里的其他标签元素不绑定事件,注意此时是需要代理的。
var div1 = document.getElementById('div1')
bindEvent(div1, 'click', 'a', function (e) {
e.preventDefault()
console.log(this.innerHTML)
})
例:我希望给id为p1的p标签绑定事件
bindEvent(p1, 'click', function (e) {
// e.preventDefault()
console.log('666')
})
这样大致就可以做到通用了,我们希望他的健壮性好一些,所以拐了几个弯,大家可以实际敲一下。