08 冒泡捕获流 事件与事件源对象

事件流

1. 描述从页面接收事件的顺序。冒泡 捕获。
2. IE 提出的 事件冒泡流(Event Bubbling)

3. NetScape 提出的 事件捕获流(Event Capturing)

   事件流的三个阶段

4. 事件捕获阶段

5. 事件目标阶段 -> 事件源的时候按照代码先后顺序执行

6. 事件冒泡阶段

   DOM分级

7. DOM0

   1. Elem.onclick/onchange/..这些句柄
   2. onclick = “test()”
8. DOM1 没有定义任何事件模型

9. DOM2 定义了addEventListner，removeEventListner这种方法 W3C规范

   事件对象

   wrapper.onclick = function (e) {
    //IE window.event
    var e = e || window.event;
    console.log(e);
   }

   事件源对象 target srcElement

10. 火狐只有target

11. IE只有srcElement

12. Chrome 都有

    事件委托，事件代理

13. 在父级绑定事件。子集触发后，冒泡到父级。在通过事件源对象来操作子集 ```javascript

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

var oUl = document.getElementsByTagName(‘ul’)[0], oList = oUl.getElementsByTagName(‘li’), len = oList.length, item;

oUl.onclick = function (e) { var tar = e.target || e.srcElement; // for循环判断。全等就打印出i 当li的长度比较长的时候不适用、 for (var i = 0; i < len; i++) { item = oList[i]; if (item === tar) { console.log(i); } } // 企业一般的做法。调用数组的indexOf方法; Array.prototype.indexOf.call(oList, tar); } ```