事件绑定函数
简单的通用事件绑定函数
function bindEvent (elem, type, fn) {
elem.addEventListener(type, fn)
}
事件冒泡
事件会从触发的元素往上级元素一层一层触发
点击"触发"弹出触发，点击"取消"弹出取消
<body>
<div id="div1">
<p id="p1">触发</p>
<p id="p2">取消</p>
<p id="p3">取消</p>
</div>
<div id="div2">
<p id="p4">取消</p>
<p id="p5">取消</p>
</div>
</body>
var p1 = document.getElementById('p1')
var body = document.body
bindEvent(p1, 'click', function(e){
e.stopPropagation() //阻止触发body上的"取消"事件
alert('触发')
})
bindEvent(body, 'click', function(e){
alert('取消')
})
事件代理
点击a标签，弹出对应a标签的内容，a标签无限多
<div id="div1">
<a href="">a1</a>
<a href="">a2</a>
<a href="">a3</a>
...
</div>
var div1 = document.getElementById('div1')
div1.addEventListener('click', function(e){
var target = e.target
if(target.nodeName === 'A') {
e.preventDefault() //阻止默认事件
alert(target.innerHTML)
}
})
使用代理的完善的通用事件绑定函数
增加selector参数，指定代理的选择器，上面例子中指的是a标签
function bindEvent(elem, type, selector, fn) {
//不使用代理的情况，selector=null
if (fn === null) {
fn = selector
selector = null
}
elem.addEventListener(type, function(e){
var target
if(selector){
target = e.target
if(target.mateches(selector)){
fn.call(target, e)
}
}eles{
fn(e)
}
})
}
//根据上面例子
//使用代理的情况下
var div1 = document.getElementById('div1')
bindEvent(div1, 'click', 'a', function(e){
console.log(this.innerHTML)
})
//不使用代理的情况下
var a1 = document.getElementById('a1')
bindEvent(a1, 'click', function(e){
console.log(a1.innerHTML)
})
网友评论