DOM-8 【冒泡捕获流-事件与事件源对象-事件委托】

一.冒泡捕获流

(1).事件流

描述从页面中接收事件的顺序

IE提出的事件冒泡流(Event Bubbling)

Netscape提出的事件捕获流(Event Capturing)

(2).执行顺序

1. 事件捕获阶段
2. 处于目标阶段
3. 事件冒泡阶段

二.事件与事件源对象

(1).事件源对象

target

srcElement

(2).兼容写法

oList.onclick=function(e){
    var tar=e.target||e.srcElement
}

FF只有target

Ie只有srcElement

chrome两个都有

三.事件委托

(1).事件委托

在父级绑定事件，子集触发后冒泡到父级，在通过事件源对象即可操作子集

oList.onclick=function(e){
    console.log(e);
    var e =e||window.event,
        tar=e.target||e.srcElement
}

(2).输出子集下标

元素对象相等

oList.onclick=function(e){
    var e = e|| window.event,
        tar= e.target||e.srcElement;
        for(var i =0; i<len;i++){
            item=oLi[i];
            if(tar===item){
                console.log(i);
            }
        }
}

indexof()

oList.onclick=function(e){
    var e = e||window.event,
        tar=e.target||e.srcElement
        var index=Array.prototype.indexOf.call(oLi,tar);
        console.log(index);
}

这种方法比上面的好