102_自定义事件
1. Event()
1.1. Event()構造函數, 創建一個新的事件對象Event。
1.2. 語法
var event = new Event(typeArg, eventInit);1.3. typeArg是DOMString類型, 表示所創建事件的名稱。
1.4. eventInit可選, 是EventInit類型的字典, 接受以下字段:
1.4.1. "bubbles"可選, Boolean類型, 默認值為false, 表示該事件是否冒泡。
1.4.2. "cancelable"可選, Boolean類型, 默認值為false, 表示該事件能否被取消。
2. event.bubbles
2.1. event.bubbles返回一個布爾值, 表明當前事件是否會向DOM樹上層元素冒泡, 是一個只讀屬性。
2.2. 語法
var bool = event.bubbles;2.3. 一些特定的事件類型會冒泡, 這時該事件對象的bubbles屬性為true, 你可以檢查該屬性的值來判斷一個事件對象是否冒泡。
3. event.stopPropagation()
3.1. event.stopPropagation()阻止捕獲和冒泡階段中當前事件的進一步傳播。但是, 它不能防止任何默認行為的發生; 例如: 對鏈接的點擊仍會被處理。如果要停止這些行為, 請參見preventDefault方法, 它可以阻止事件觸發后默認動作的發生。
3.2. 語法
event.stopPropagation();3.3. event.stopPropagation()方法沒有參數也沒有返回值。
4. event.cancelable
4.1. event.cancelable是一個只讀屬性, 表明該事件是否可以被取消, 當事件被阻止之后, 該事件就好像沒有被觸發一樣。如果事件不能被取消, 則其cancelable屬性的值為false, 且事件發生時無法在事件監聽回調中停止事件。
4.2. 在許多事件的監聽回調中調用preventDefault()前, 都需要檢查cancelable屬性的值。
4.3. 大部分由用戶與頁面交互產生的原生瀏覽器事件都可以被取消。取消click, scroll或beforeunload事件將分別阻止用戶點擊某些元素、滾動頁面或跳離頁面。
4.4. 語法
var bool = event.cancelable;5. event.preventDefault()
5.1. event.preventDefault()取消事件(如果該事件可取消)。
5.2. 語法
event.preventDefault();5.3. event.preventDefault()方法沒有參數也沒有返回值。
6. EventTarget.dispatchEvent(event)
6.1. EventTarget.dispatchEvent(event)向一個指定的事件目標派發一個事件, 并以合適的順序同步調用目標元素相關的事件處理函數。標準事件處理規則(包括事件捕獲和可選的冒泡過程)同樣適用于通過手動的使用dispatchEvent(event)方法派發的事件。
6.2. 語法
var cancelled = !target.dispatchEvent(event)6.3. event參數是要被派發的事件對象。
6.4. target調用者被用來初始化事件和決定將會觸發事件的目標。
6.4. 當該事件是可取消的(cancelable為true)并且至少一個該事件的事件處理方法調用了Event.preventDefault(), 則返回值為false; 否則返回true。
6.5. 與瀏覽器原生事件不同, 原生事件是由DOM派發的, 并通過event loop異步調用事件處理程序, 而dispatchEvent()則是同步調用事件處理程序。在調用dispatchEvent()后, 所有監聽該事件的事件處理程序將在代碼繼續前執行并返回。
7. 例子
7.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>自定義事件Event</title><style type="text/css">div {width: 150px;height: 90px;line-height: 90px;background-color: #D94A38;margin-top: 20px;text-align: center;}p {width: 150px;height: 32px;line-height: 32px;background-color: green;text-align: center;}</style></head><body><div id="div1"><p id="p1">冒泡</p></div><div id="div2"><p id="p2">冒泡</p></div> <div id="div3"><p id="p3">捕獲</p></div> <div id="div4"><p id="p4">捕獲</p></div> <div id="div5"><p id="p5">捕獲</p></div> <div id="div6"><p id="p6">冒泡</p></div> <a id="a1" href="https://www.baidu.com" target="_blank">百度</a><a id="a2" href="https://map.baidu.com" target="_blank">百度地圖</a><script type="text/javascript">// 首先看元素, 第一外層元素是捕獲還是冒泡, 外層元素是捕獲就是捕獲傳播。外層元素是冒泡, 然后看事件是否支持冒泡。var div1 = document.getElementById('div1'), p1 = document.getElementById('p1');var ev1 = new Event("upbubbles1", {"bubbles": true, "cancelable": true});function div1Event(e){console.log('div1自定義的事件被觸發了');} function p1Event(e){console.log('p1自定義的事件被觸發了');console.log('p1自定義的事件是否會向DOM樹上層元素冒泡: ' + e.bubbles);console.log('p1自定義的事件是否可以取消: ' + e.cancelable);}div1.addEventListener('upbubbles1', div1Event);p1.addEventListener('upbubbles1', p1Event);p1.dispatchEvent(ev1);var div2 = document.getElementById('div2'), p2 = document.getElementById('p2');var ev2 = new Event("upbubbles2", {"bubbles": true, "cancelable": true});function div2Event(e){console.log('div2自定義的事件被觸發了');}function p2Event(e){console.log('p2自定義的事件被觸發了');console.log('p2自定義的事件是否會向DOM樹上層元素冒泡: ' + e.bubbles);console.log('p2自定義的事件是否可以取消: ' + e.cancelable);// 阻止事件進一步傳播e.stopPropagation();}div2.addEventListener('upbubbles2', div2Event);p2.addEventListener('upbubbles2', p2Event);p2.dispatchEvent(ev2);var div3 = document.getElementById('div3'), p3 = document.getElementById('p3');var ev3 = new Event("upbubbles3", {"bubbles": true, "cancelable": true});function div3Event(e){console.log('div3自定義的事件被觸發了');} function p3Event(e){console.log('p3自定義的事件被觸發了');console.log('p3自定義的事件是否會向DOM樹上層元素冒泡: ' + e.bubbles);console.log('p3自定義的事件是否可以取消: ' + e.cancelable);}div3.addEventListener('upbubbles3', div3Event, true);p3.addEventListener('upbubbles3', p3Event, true);p3.dispatchEvent(ev3);var div4 = document.getElementById('div4'), p4 = document.getElementById('p4');var ev4 = new Event("upbubbles4", {"bubbles": false, "cancelable": true});function div4Event(e){console.log('div4自定義的事件被觸發了');}function p4Event(e){console.log('p4自定義的事件被觸發了');console.log('p4自定義的事件是否會向DOM樹上層元素冒泡: ' + e.bubbles);console.log('p4自定義的事件是否可以取消: ' + e.cancelable);}div4.addEventListener('upbubbles4', div4Event, true);p4.addEventListener('upbubbles4', p4Event, true);p4.dispatchEvent(ev4);var div5 = document.getElementById('div5'), p5 = document.getElementById('p5');var ev5 = new Event("notupbubbles5", {"bubbles": true, "cancelable": true});function div5Event(e){console.log('div5自定義的事件被觸發了');// 阻止事件進一步傳播e.stopPropagation();}function p5Event(e){console.log('p5自定義的事件被觸發了');console.log('p5自定義的事件是否會向DOM樹上層元素冒泡: ' + e.bubbles);console.log('p5自定義的事件是否可以取消: ' + e.cancelable);}div5.addEventListener('notupbubbles5', div5Event, true);p5.addEventListener('notupbubbles5', p5Event, true);p5.dispatchEvent(ev5);var div6 = document.getElementById('div6'), p6 = document.getElementById('p6');var ev6 = new Event("notupbubbles6");function div6Event(e){console.log('div6自定義的事件被觸發了');}function p6Event(e){console.log('p6自定義的事件被觸發了');console.log('p6自定義的事件是否會向DOM樹上層元素冒泡: ' + e.bubbles);console.log('p6自定義的事件是否可以取消: ' + e.cancelable);}div6.addEventListener('notupbubbles6', div6Event, false);p6.addEventListener('notupbubbles6', p6Event, false);p6.dispatchEvent(ev6);var a1 = document.getElementById('a1');a1.addEventListener('click', function(e){// 阻止超鏈接的默認跳轉行為, 同時超鏈接點擊也不變色console.log('a1超鏈接點擊的事件是否可以取消: ' + e.cancelable);e.preventDefault();});</script></body> </html>7.2. 效果圖
8. Event.cancelBubble
8.1. Event.cancelBubble屬性是Event.stopPropagation()的一個曾用名。在從事件處理程序返回之前將其值設置為true可阻止事件的傳播。
8.2. 語法
event.cancelBubble = bool; let bool = event.cancelBubble;9. Event.target
9.1. target對觸發事件的對象的引用。當事件處理程序在事件的冒泡或捕獲階段被調用時, 它與event.currentTarget不同。
9.2. 語法
let theTarget = event.target10. event.currentTarget
10.1. currentTarget是一個只讀屬性, 當事件沿著DOM觸發時, 事件的當前目標。它總是指向事件綁定的元素, 而Event.target則是事件觸發的元素。
10.2. 語法
var currentEventTarget = event.currentTarget;11. Event.type
11.1. Event.type是一個只讀屬性, 會返回一個字符串, 表示該事件對象的事件類型。
11.2. 語法
var str = event.type12. Event.isTrusted
12.1. Event.isTrusted是一個只讀屬性, 它是一個布爾值。當事件是由用戶行為生成的時候, 這個屬性的值為true, 而當事件是由腳本創建、修改、通過EventTarget.dispatchEvent()派發的時候, 這個屬性的值為false。
12.2. 語法
var eventIsTrusted = event.isTrusted;13. event.defaultPrevented
13.1. event.defaultPrevented返回一個布爾值, 表示是否取消了事件的默認行為。表明當前事件是否調用了event.preventDefault()方法。
13.2. 語法
bool = event.defaultPrevented14. 例子
14.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>自定義事件Event屬性</title><style type="text/css">div {width: 150px;height: 90px;line-height: 90px;background-color: #D94A38;margin-top: 20px;text-align: center;}p {width: 150px;height: 32px;line-height: 32px;background-color: green;text-align: center;}</style></head><body><div id="div1"><p id="p1">冒泡</p></div><div id="div2"><p id="p2">捕獲</p></div> <div id="div3"></div> <a id="a1" href="https://www.baidu.com" target="_blank">百度</a><script type="text/javascript">var div1 = document.getElementById('div1'), p1 = document.getElementById('p1');var ev1 = new Event("upbubbles1", {"bubbles": true, "cancelable": true});function div1Event(e){console.log('div1自定義的事件被觸發了');} function p1Event(e){var t = e.target;var ct = e.currentTarget;console.log('事件觸發的元素: ' + t.id);console.log('事件綁定的元素: ' + ct.id);console.log('p1自定義的事件被觸發了');// 阻止事件進一步傳播e.cancelBubble = true;}div1.addEventListener('upbubbles1', div1Event);p1.addEventListener('upbubbles1', p1Event);p1.dispatchEvent(ev1);var div2 = document.getElementById('div2'), p2 = document.getElementById('p2');var ev2 = new Event("upbubbles2", {"bubbles": true, "cancelable": true});function div2Event(e){var t = e.target;var ct = e.currentTarget;console.log('事件觸發的元素: ' + t.id);console.log('事件綁定的元素: ' + ct.id);console.log('div2自定義的事件被觸發了');// 阻止事件進一步傳播e.cancelBubble = true;}function p2Event(e){console.log('p2自定義的事件被觸發了');}div2.addEventListener('upbubbles2', div2Event, true);p2.addEventListener('upbubbles2', p2Event, true);p2.dispatchEvent(ev2);var div3 = document.getElementById('div3');var ev3 = new Event("upbubbles3", {"bubbles": true, "cancelable": true});function div3Event(e){console.log('div3自定義的事件被觸發了');console.log('事件對象的事件類型: ' + e.type);console.log('事件是由腳本創建的: ' + (!e.isTrusted));} div3.addEventListener('upbubbles3', div3Event, true);div3.dispatchEvent(ev3);var a1 = document.getElementById('a1');a1.addEventListener('click', function(e){e.preventDefault();console.log('是否取消了事件的默認行為: ' + e.defaultPrevented);});</script></body> </html>14.2. 效果圖
總結
