js原生事件绑定
2017-09-18 本文已影响0人
念旧的阿蛮
关于事件绑定的面试题和实际运用
如何编写一个通用的原生事件监听函数？
// 简单封装一个通用事件绑定
function bindEvent(elem,type,fn){
elem.addEventListener(type,fn);
}
var a = document.getElementById('link1');
bindEvent(a,'click',function(e){
e.preventDefault(); // 阻止标签默认行为
alert('click')
});
// 关于低版本时间兼容
// 使用attachEvent绑定事件
关于低版本的浏览器我们只需要了解就好了，如果你在面试中如果要求要对很低版本的浏览器做兼容的话，建议你还是换一个机会去面，处理低版本浏览器的兼容是浪费生命的一件事情。
使用事件冒泡实现代理事件绑定？
在实际工作运用中,比如这么一个场景：我们要对一页的多个图片项做事件绑定，如果我们一个个对图片绑定是一件很麻烦的事情，而且还有对重新加载的图片做重新的绑定这是个很麻烦的时候。所以我们使用事件冒泡实现代理绑定事件就完美解决了这些问题.。
这里我们使用绑定父元素的点击事件，然后使用子元素的冒泡事件触发点击，然后通过e.target（事件目标对象）判断触发事件元素的那个。
<!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>dom事件</title>
</head>
<body>
<a href="#" id='link1'>事件绑定</a>
<div id="div1">
<a href="#" id="a1">1</a>
<a href="#" id="a2">2</a>
<a href="#" id="a3">3</a>
<!-- 一会随时新增更多的a便签 -->
</div>
<script>
var div1 = document.getElementById('div1');
div1.addEventListener('click',function(e){
e.preventDefault();
var target = e.target;
if(target.nodeName === 'A'){
alert(target.innerHTML);
}
})
</script>
</body>
</html>
所以我们现在重新封装通用事件的件兼容函数
// elem:元素 type:事件类型 selector:目标元素节点的名称 fn：事件触发方法
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
// matches target是
if(target.matches(selector)){
fn.call(target,e)
}
}else{
fn(e)
}
})
}
bindEvent(div1,'click','a',function(e){
alert(e.target.innerHTML)
})
