<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="div1">
<a href="#">imooc</a>
<a href="#">imooc</a>
<a href="#">imooc</a>
<a href="#">imooc</a>
<p id="p1">激活</p>
<p id="p2">取消</p>
</div>
<div id="div2">
<p id="p3">取消</p>
<p id="p4">取消</p>
</div>
</body>
<script>
function bindEvent(elem, type, selector, fn){
if (fn == null) {
fn = selector
selector = null
}
elem.addEventListener(type, function(e) {
var target
if (selector) {
//代理
target = e.target
if(target.matches(selector)){
fn.call(target, e)
}
} else {
//不是代理
fn(e)
}
})
}
var div1 = document.getElementById('div1')
//使用代理
bindEvent(div1, 'click', 'a', function(e) {
e.preventDefault()
console.log(this.innerHTML)
})
//不使用代理
bindEvent(p1, 'click', function(e) {
console.log(p1.innerHTML)
})
</script>
</html>完善通用事件绑定函数
猜你喜欢
转载自blog.csdn.net/qq_40646986/article/details/82698685
今日推荐
周排行