事件
题目
- 编写一个通用的事件监听函数
- 描述事件冒泡流程
- 对于一个无限下拉加载图片的页面,如何给每个图片绑定事件
知识点
通用事件绑定
事件冒泡
代理 (即委托,也是事件冒泡的应用)
//通用事件绑定
var btn = document.getElementById('btn1')
btn.addEventListener('click',function(event){
console.log('clicked')
})
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标准不一样(不使用addEventListener)
- IE低版本使用量已非常少,很多网站都早已不支持
- 建议对IE低版本的兼容性,了解即可,无需深究
- 如果遇到对IE低版本要求苛刻的面试,果断放弃
安卓兼容性
<body>
<div id="div1">
<p id="p1">激活</p>//点击p1时,事件冒泡
//会沿着DOM树向上事件冒泡
//先到div1,再冒到body
//会一直触发DOM树上的事件
//这种情况下需要阻止冒泡
<p id="p2">取消</p>
<p id="p3">取消</p>
</div>
<div id="div2">
<p id="p4">取消</p>
<p id="p5">取消</p>
<p id="p6">取消</p>
</div>
</body>
function bindEvent(elem,type,fn){
elem.addEventListener(type,fn)
}
//事件冒泡
var p1 = document.getElementById('p1')
var body = document.body
bindEvent(p1,'click',function(e){
e.stopPropatation()//用于阻止冒泡
alert('激活')
})
bindEvent(body,'click',function(e){
alert('取消')//这个是利用了事件冒泡
})
代理
事件冒泡具体应用
<!--怎么给所有a标签添加事件,点击弹出a标签内容-->
<div id="div1">
<a href="#">a1</a>
<a href="#">a2</a>
<a href="#">a3</a>
<a href="#">a4</a>
<!--会随时新增更多 a 标签-->
</div>
//代理
var div1 = document.getElementById('div1')
div1.addEventListener('click',function(e){
var target = e.target
//target告诉你事件是在哪里触发的
//e.target 在这里就是 a 对象
if(target.nodeName === 'A'){
alert(target.innerHTML)
}
})
完善通用绑定事件的函数
//是否使用代理
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)
//call用于改变this指向
//如果直接fn(e)this是window吗
}else{
//不是事件代理
fn(e)
}
})
}
//使用代理
var div1 = ducoment.getElementById('div1')
bindEvent(div1,'click','a',function(e){
alert(this.innnerHTML)
})
//不使用代理
var a = document.getElementById('a1')
bindEvent(a,'click',function(){
alert(a.innerHTML)
})
代理的好处
- 代码简洁
- 减少浏览器内存占用
解答
编写一个通用额事件监听函数
描述事件冒泡的流程
- DOM树形结构
- 事件冒泡
- 阻止冒泡
- 冒泡应用
对于一个无限下拉加载图片的页面,如何给每个图片绑定事件
- 使用代理
- 知道代理的两个优点