问题
1、编写一个通用的事件监听函数
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.match(selector)){
fn.call(target,e);
}
}else{
fn(e);
}
});
}
//不使用代理
var a = document.getElementById("link1");
bindEvent(a, 'click', function(e){
alert('clicked');
});
//使用代理
var div1 = document.getElementById("div1");
bindEvent(div1, 'click', "a", function(e){
alert('clicked');
});
2、描述事件冒泡流程
- DOM树形结构
- 事件冒泡
- 阻止冒泡
e.stopPropagation() - 冒泡应用
事件代理，在父元素上绑定事件
3、对于一个无限下拉加载图片的页面，如何给每个图片绑定事件
知识点
1、事件绑定
2、事件流模型
事件流描述的是从页面中接收事件的顺序。DOM结构是树形结构，当页面中的某一个元素触发了某个一个事件，事件会从最顶层的window对象开始，向下传播到目标元素，途径的祖先节点都会触发对应的事件，如果当前节点的该事件绑定了事件处理函数的话，则会执行该函数当事件达到目标元素并执行绑定函数（如果有绑定的话）后，事件又会向上传播到 window 元素，途径的祖先节点都会触发对应的事件（如果绑定事件处理函数的话）。
事件流包含三个阶段：
- 事件捕捉阶段：事件开始由顶层对象触发，然后逐级向下传播，直到目标元素；
- 处于目标阶段：处在绑定事件的元素上；
-
事件冒泡阶段：事件由具体的元素先接收，然后逐级向上传播，直到不具体的元素；
image
注释
一般来说事件冒泡机制，用的更多一些，所以在 IE8 以及之前，IE只支持事件冒泡。IE9+/FF/Chrome这2种模型都支持，可以通过addEventListener((type, listener, useCapture)的useCapture来设定，useCapture=false（默认）代表着事件冒泡，useCapture=true代表着采用事件捕获。
3、代理
<div id="div1">
<a href="#">a1</a>
<a href="#">a2</a>
<a href="#">a3</a>
<a href="#">a4</a>
......
</div>
var div1 = document.getElementById("div1");
div1.addEventListener('click',function(e){
var target = e.target;
if(target.nodeName === "A"){
alert(target.innerHTML);
}
})
