事件流
1. 含義
- 描述從頁面中接收事件的順序
2. 分類
- IE提出的 事件冒泡流 Event Bubbling
- Netscape提出的 事件捕獲流 Event Capturing
3. 階段
- 事件捕獲階段
- 處于目标階段
- 事件冒泡階段
- 事件捕獲先于事件冒泡執行
DOM-8 【相容】冒泡捕獲流、事件與事件源對象、事件委托事件流dom事件對象e / window.event事件源（對象）事件委托/事件代理
dom
- dom0：定義句柄方式，相容性最好
- dom1：沒有事件相關定義
- dom2：addEventListener / removeEventListener W3C規範
事件對象e / window.event
1. W3C标準
- e：事件觸發後的詳細資訊，傳到事件處理函數的參數裡
- 是由MouseEvent構造函數構造的
2. IE
- 作為window的屬性：window.event，不再傳到事件處理函數的參數裡
事件源（對象）
- 在事件對象裡可擷取到srcElement和target：事件源對象
- 火狐隻有target
- IE隻有srcElement
- chrome都有
- 【相容】
oDiv.onclick = function (e) {
var e = e || window.event,
tar = e.target || e.srcElement
}
事件委托/事件代理
- 并不直接給子元素綁定事件，而給父元素綁定（免去了給子元素循環綁定事件的不便）
- 因為子元素被點選後會冒泡給父級
- 判斷下事件源
tar.tagName.toLowerCase() === 'xxx'
擷取下标
- 循環比較獲得下标
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);
}
}
}
- 數組方法查找下标【企業級寫法】
- 注意：todoList案例，不能這樣判斷添加項和現有項是否重複，因為li是引用值
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);
}
- 自定義屬性
<body>
<ul class="test">
<li data-index="0">1</li>
<li data-index="1">2</li>
<li data-index="2">3</li>
<li data-index="3">4</li>
<li data-index="4">5</li>
<li data-index="5">6</li>
</ul>
<script>
var oUl = document.getElementsByClassName('test')[0]
oUl.onclick = function (e) {
var e = e || window.e
var tar = e.target || e.srcElement
console.log(e)
console.log(tar)
console.log(Number(tar.getAttribute('data-index')))
}
</script>
</body>