image.png

事件流

事件流描述的是從頁面中接受事件的順序。

• IE 的事件流是事件冒泡流，事件由子元素獲取并沿DOM樹向上傳播。即事件最開始由最具體的元素(文檔中嵌套層次最深的那個節(jié)點)接收，然后逐級向上轉播至最不具體的節(jié)點(document)，用 stopPropagation() 方法終止冒泡。
• Netscape 的事件流是事件捕獲流，事件由根元素獲取并沿DOM樹向下分發(fā)。與事件冒泡流相反，事件捕獲的思想是不太具體的節(jié)點(document)應該更早接收到事件，而最具體的節(jié)點最后接收到事件。已經(jīng)不適用了

image.png

image.png

image.png

image.png

事件處理程序

HTML 事件處理程序

事件直接寫在html的元素里面，缺點：html和js代碼緊密的耦合在一起。
<a href="" onclick="alert('msg');">測試</a>

0級 DOM事件處理程序

把一個函數(shù)賦值給一個事件的處理程序屬性，優(yōu)點：比較簡單，跨瀏覽器支持。缺點：不能添加多個事件處理程序，最后一個事件會覆蓋前面的事件

document.getElementById('id').onclick = function () { alert(1); }

2級 DOM事件處理程序

通過 addeventlistener() 添加事件，只能用removeEventlistener() 刪除此事件。它們都接收三個參數(shù)：要處理的事件名event（不加'on'）、作為事件處理程序的函數(shù)function（優(yōu)點：可以添加多個事件處理程序，）和一個布爾值useCapture。布爾參數(shù)僅僅在現(xiàn)代瀏覽器最近的幾個版本中是可加可不加的，并且true代表該事件在捕獲階段執(zhí)行，false代表在冒泡階段執(zhí)行，建議寫false，因為有些瀏覽器只有冒泡階段。
target.addEventListener(type, listener[, useCapture]);
target.removeEventListener(type, listener[, useCapture]);

IE 事件處理程序

IE8 及更早IE版本不支持addEventListener()方法，Opera 7.0 及 Opera 更早版本也不支持。 但是，對于這些不支持該函數(shù)的瀏覽器，你可以使用 attachEvent() 方法來添加事件句柄。通過 attachEvent() 添加事件，只能用detachEvent()刪除此事件。這兩個方法接收相同的兩個參數(shù)：事件處理程序名稱 type 與事件處理函數(shù) function，不支持第三個參數(shù)的原因：IE8--只支持冒泡冒泡流。
element.attachEvent(type, function)
element.detachEvent(type, function)

事件代理和委托

當我們需要對很多元素添加事件的時候，可以通過將事件添加到它們的父節(jié)點而將事件委托給父節(jié)點來觸發(fā)處理函數(shù)。這主要得益于瀏覽器的事件冒泡機制。
<pre>
<div id="box">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>

<script>
let box = document.getElementById('box');
box.addEventListener('click', function (e) {
// 檢查事件源e.targe是否為P
if (e.target.nodeName === 'P') {
// 真正的處理過程在這里
alert('p');
}
})
</script>
</pre>

跨瀏覽器兼容的事件處理程序（能力檢測）

<pre>
/*

• @Author: bxm09
• @Date: 2017-03-24 15:51:37
• @Last Modified by: bxm09
• @Last Modified time: 2017-07-24 13:16:04
• @Desc 跨瀏覽器兼容的事件處理程序（能力檢測）
  */

var eventshiv = {
// event兼容
getEvent: function(event) {
return event ? event : window.event;
},

// type兼容
getType: function(event) {
    return event.type;
},
// target兼容
getTarget: function(event) {
    return event.target ? event.target : event.srcelem;
},

/**
 * 添加事件句柄
 * 2級 DOM -> IE -> 0級 DOM
 */
addHandler: function(elem, type, listener) {
    if (elem.addEventListener) {
        elem.addEventListener(type, listener, false);
    } else if (elem.attachEvent) {
        elem.attachEvent('on' + type, listener);
    } else {
        // 在這里由于.與'on'字符串不能鏈接，只能用 []
        elem['on' + type] = listener;
    }
},

// 移除事件句柄
removeHandler: function(elem, type, listener) {
    if (elem.removeEventListener) {
        elem.removeEventListener(type, listener, false);
    } else if (elem.detachEvent) {
        elem.detachEvent('on' + type, listener);
    } else {
        elem['on' + type] = null;
    }
},

/**
 * 添加事件代理
 */
addAgent: function (elem, type, agent, listener) {
    elem.addEventListener(type, function (e) {
        if (e.target.matches(agent)) {
            listener.call(e.target, e); // this 指向 e.target
        }
    });
},

/**
 * 取消默認行為
 * 非IE -> IE
 */
preventDefault: function(event) {
    if (event.preventDefault) {
        event.preventDefault();
    } else {
        event.returnValue = false;
    }
},

/**
 * 阻止事件冒泡
 * 非IE -> IE
 */
stopPropagation: function(event) {
    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
}

};
console.log('eventshiv.js 文件加載成功！');
</pre>