问题
编写一个通用的事件监听函数
描述事件冒泡的过程
对于一个无限下拉加载图片的页面,如何给每个图片绑定事件
知识点
- 通用事件绑定
<input type="button" id="btn1" value="按钮1">
<a href="http://jianshu.com" id="aLink">简书</a>
//标准方法
var btn = document.getElementById('btn1');
btn.addEventListener('click', function(e) {
console.log('checked')
})
//封装事件绑定
function blindEvent(elem, type, fn) {
elem.addEventListener(type, fn)
}
var a = document.getElementById('aLink')
blindEvent(a, 'click', function(e) {
e.preventDefault() //阻止默认行为
alert('checked')
})
IE 低版本浏览器
IE 低版本使用 attachEvent 绑定事件,和 W3C 标准不一样
IE 低版本使用量已经非常少了,很多网站都已经不支持了
建议对 IE 低版本的兼容性了解即可,无需深究
如果遇到对 IE 低版本要求苛刻的面试, 果断放弃
- 事件冒泡
功能需求: 点击下面的每个 P 标签,弹出里面相应的内容
<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>
//封装的绑定事件
function blindEvent(elem, type, fn) {
elem.addEventListener(type, fn)
}
//开始
var p1 = document.getElementById('p1');
blindEvent(p1, 'click', function(e) {
e.stopPropagation(); //阻止冒泡到上层;如果不阻止的话,会先弹出'激活',再弹出'取消',因为在body上也绑定了事件
alert('激活')
})
var body = document.body;
blindEvent(body, 'click', function(e) {
alert('取消')
})
- 事件代理(事件冒泡的具体应用)
使用场景:多个元素上绑定相同的事件
原理:利用冒泡机制
操作:把事件绑定在要绑定元素的父元素上面
<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;
// e.target能告诉你点击(事件)是从哪儿触发的
//例如在div1 上绑定了一个点击事件,在 a1 上点击,这个时候 target 是a1,而不是 div1
if (target.nodeName === 'A') {
alert(target.innerHTML)
}
})
解题
1: 编写一个通用的事件监听函数
//elem:要绑定元素的父元素; type:事件类型; selector:本来要绑定的元素
function bindEvent(elem,type,selector,fn) {
//如果第四个参数没有,那么第三个参数应该是一个函数,fn 就赋值成 selector
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.href);
})
//不使用代理
var btn1 = document.getElementById('btn1')
bindEvent(btn1,'click',function(e) {
console.log(btn1.innerHTML);
})
2:描述事件冒泡流程
- DOM树形结构
- 事件冒泡
- 阻止冒泡
事件从最深的节点开始,然后一层一层逐步向上传播开来
3:对于一个无限下拉加载图片的页面，如何给每个图片绑定事件
使用代理把事件绑定在要绑定元素的父元素上面
