JS事件冒泡、事件捕获

问题

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);
    }
})