前端JS基础八（事件）
2018-08-03 本文已影响0人
EmilioWeng
事件
- 通用事件绑定
var btn=document.getElementById(‘btn1’);
btn.addEventListener(‘click’,function(event){ //JS事件绑定
console.log(‘clicked’)
})
//由于addEventListener太长了 我们自己写一个事件绑定函数
function bindEvent(elem,type,fn){
elem.addEventListener(type,fn)
}
var a=document.getElementById(‘link1’)
bindEvent(a,’click’,function(e){ //事件绑定函数的使用
e.preventDefault() //阻止默认行为
alert(‘clicked’)
})
注：关于IE低版本的兼容性
IE低版本使用attachEvent绑定事件，和W3C标准不一样
事件冒泡
在父级 div 中定义的事件，会在子级的事件执行之后冒泡上来执行
- 阻止事件冒泡 e.stopPropagation()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1">
<p id="p1">激活</p>
<p id="p2">取消</p>
<p id="p3">取消</p>
<p id="p4">取消</p>
</div>
<div id="div2">
<p id="p5">取消</p>
<p id="p6">取消</p>
</div>
<script type="text/javascript">
利用阻止冒泡的机制实现：只点击 p1 的时候弹窗激活
function bindEvent(elem,type,func) {
elem.addEventListener(type,func)
}
var p1 = document.getElementById('p1')
bindEvent(p1,'click',function(e){
e.stopPropagation()
alert('激活')
})
bindEvent(body,'click',function (e) {
alert('取消')
})
</script>
</body>
</html>
- 代理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1">
<p id="p1">激活</p>
<p id="p2">取消</p>
</div>
<div id="div2">
<p id="p3">取消</p>
<p id="p4">取消</p>
</div>
<script type="text/javascript">
写一个带有代理功能的事件监听函数
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) //将fn里的this替换为target
}
}else{
//不是代理
fn(e)
}
})
}
var div1 = document.getElementById('div1')
bindEvent(div1,'click','a',function(e){
e.preventDefault()
console.log(this.innerHTML)
})
var p1 = document.getElementById('p1')
bindEvent(p1,'click',function(e){
console.log(p1.innerHTML)
})
</script>
</body>
</html>
练习题
练习题1、编写一个通用的事件监听函数
看上面的bindEvent函数
练习题2、描述事件冒泡流程
1、DOM树形结构
2、事件冒泡
3、阻止冒泡
4、冒泡的应用(代理)
练习题3、对于一个无线下拉加载图片的页面，如何给每个图片绑定事件
1、使用代理
2、知道代理的两个优点
（1）代码简洁
（2）减少浏览器内存占用
