102_自定义事件
1. Event()
1.1. Event()構(gòu)造函數(shù), 創(chuàng)建一個(gè)新的事件對(duì)象Event。
1.2. 語法
var event = new Event(typeArg, eventInit);1.3. typeArg是DOMString類型, 表示所創(chuàng)建事件的名稱。
1.4. eventInit可選, 是EventInit類型的字典, 接受以下字段:
1.4.1. "bubbles"可選, Boolean類型, 默認(rèn)值為false, 表示該事件是否冒泡。
1.4.2. "cancelable"可選, Boolean類型, 默認(rèn)值為false, 表示該事件能否被取消。
2. event.bubbles
2.1. event.bubbles返回一個(gè)布爾值, 表明當(dāng)前事件是否會(huì)向DOM樹上層元素冒泡, 是一個(gè)只讀屬性。
2.2. 語法
var bool = event.bubbles;2.3. 一些特定的事件類型會(huì)冒泡, 這時(shí)該事件對(duì)象的bubbles屬性為true, 你可以檢查該屬性的值來判斷一個(gè)事件對(duì)象是否冒泡。
3. event.stopPropagation()
3.1. event.stopPropagation()阻止捕獲和冒泡階段中當(dāng)前事件的進(jìn)一步傳播。但是, 它不能防止任何默認(rèn)行為的發(fā)生; 例如: 對(duì)鏈接的點(diǎn)擊仍會(huì)被處理。如果要停止這些行為, 請(qǐng)參見preventDefault方法, 它可以阻止事件觸發(fā)后默認(rèn)動(dòng)作的發(fā)生。
3.2. 語法
event.stopPropagation();3.3. event.stopPropagation()方法沒有參數(shù)也沒有返回值。
4. event.cancelable
4.1. event.cancelable是一個(gè)只讀屬性, 表明該事件是否可以被取消, 當(dāng)事件被阻止之后, 該事件就好像沒有被觸發(fā)一樣。如果事件不能被取消, 則其cancelable屬性的值為false, 且事件發(fā)生時(shí)無法在事件監(jiān)聽回調(diào)中停止事件。
4.2. 在許多事件的監(jiān)聽回調(diào)中調(diào)用preventDefault()前, 都需要檢查cancelable屬性的值。
4.3. 大部分由用戶與頁面交互產(chǎn)生的原生瀏覽器事件都可以被取消。取消click, scroll或beforeunload事件將分別阻止用戶點(diǎn)擊某些元素、滾動(dòng)頁面或跳離頁面。
4.4. 語法
var bool = event.cancelable;5. event.preventDefault()
5.1. event.preventDefault()取消事件(如果該事件可取消)。
5.2. 語法
event.preventDefault();5.3. event.preventDefault()方法沒有參數(shù)也沒有返回值。
6. EventTarget.dispatchEvent(event)
6.1. EventTarget.dispatchEvent(event)向一個(gè)指定的事件目標(biāo)派發(fā)一個(gè)事件, 并以合適的順序同步調(diào)用目標(biāo)元素相關(guān)的事件處理函數(shù)。標(biāo)準(zhǔn)事件處理規(guī)則(包括事件捕獲和可選的冒泡過程)同樣適用于通過手動(dòng)的使用dispatchEvent(event)方法派發(fā)的事件。
6.2. 語法
var cancelled = !target.dispatchEvent(event)6.3. event參數(shù)是要被派發(fā)的事件對(duì)象。
6.4. target調(diào)用者被用來初始化事件和決定將會(huì)觸發(fā)事件的目標(biāo)。
6.4. 當(dāng)該事件是可取消的(cancelable為true)并且至少一個(gè)該事件的事件處理方法調(diào)用了Event.preventDefault(), 則返回值為false; 否則返回true。
6.5. 與瀏覽器原生事件不同, 原生事件是由DOM派發(fā)的, 并通過event loop異步調(diào)用事件處理程序, 而dispatchEvent()則是同步調(diào)用事件處理程序。在調(diào)用dispatchEvent()后, 所有監(jiān)聽該事件的事件處理程序?qū)⒃诖a繼續(xù)前執(zhí)行并返回。
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自定義的事件被觸發(fā)了');} function p1Event(e){console.log('p1自定義的事件被觸發(fā)了');console.log('p1自定義的事件是否會(huì)向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自定義的事件被觸發(fā)了');}function p2Event(e){console.log('p2自定義的事件被觸發(fā)了');console.log('p2自定義的事件是否會(huì)向DOM樹上層元素冒泡: ' + e.bubbles);console.log('p2自定義的事件是否可以取消: ' + e.cancelable);// 阻止事件進(jìn)一步傳播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自定義的事件被觸發(fā)了');} function p3Event(e){console.log('p3自定義的事件被觸發(fā)了');console.log('p3自定義的事件是否會(huì)向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自定義的事件被觸發(fā)了');}function p4Event(e){console.log('p4自定義的事件被觸發(fā)了');console.log('p4自定義的事件是否會(huì)向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自定義的事件被觸發(fā)了');// 阻止事件進(jìn)一步傳播e.stopPropagation();}function p5Event(e){console.log('p5自定義的事件被觸發(fā)了');console.log('p5自定義的事件是否會(huì)向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自定義的事件被觸發(fā)了');}function p6Event(e){console.log('p6自定義的事件被觸發(fā)了');console.log('p6自定義的事件是否會(huì)向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){// 阻止超鏈接的默認(rèn)跳轉(zhuǎn)行為, 同時(shí)超鏈接點(diǎn)擊也不變色console.log('a1超鏈接點(diǎn)擊的事件是否可以取消: ' + e.cancelable);e.preventDefault();});</script></body> </html>7.2. 效果圖
8. Event.cancelBubble
8.1. Event.cancelBubble屬性是Event.stopPropagation()的一個(gè)曾用名。在從事件處理程序返回之前將其值設(shè)置為true可阻止事件的傳播。
8.2. 語法
event.cancelBubble = bool; let bool = event.cancelBubble;9. Event.target
9.1. target對(duì)觸發(fā)事件的對(duì)象的引用。當(dāng)事件處理程序在事件的冒泡或捕獲階段被調(diào)用時(shí), 它與event.currentTarget不同。
9.2. 語法
let theTarget = event.target10. event.currentTarget
10.1. currentTarget是一個(gè)只讀屬性, 當(dāng)事件沿著DOM觸發(fā)時(shí), 事件的當(dāng)前目標(biāo)。它總是指向事件綁定的元素, 而Event.target則是事件觸發(fā)的元素。
10.2. 語法
var currentEventTarget = event.currentTarget;11. Event.type
11.1. Event.type是一個(gè)只讀屬性, 會(huì)返回一個(gè)字符串, 表示該事件對(duì)象的事件類型。
11.2. 語法
var str = event.type12. Event.isTrusted
12.1. Event.isTrusted是一個(gè)只讀屬性, 它是一個(gè)布爾值。當(dāng)事件是由用戶行為生成的時(shí)候, 這個(gè)屬性的值為true, 而當(dāng)事件是由腳本創(chuàng)建、修改、通過EventTarget.dispatchEvent()派發(fā)的時(shí)候, 這個(gè)屬性的值為false。
12.2. 語法
var eventIsTrusted = event.isTrusted;13. event.defaultPrevented
13.1. event.defaultPrevented返回一個(gè)布爾值, 表示是否取消了事件的默認(rèn)行為。表明當(dāng)前事件是否調(diào)用了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自定義的事件被觸發(fā)了');} function p1Event(e){var t = e.target;var ct = e.currentTarget;console.log('事件觸發(fā)的元素: ' + t.id);console.log('事件綁定的元素: ' + ct.id);console.log('p1自定義的事件被觸發(fā)了');// 阻止事件進(jìn)一步傳播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('事件觸發(fā)的元素: ' + t.id);console.log('事件綁定的元素: ' + ct.id);console.log('div2自定義的事件被觸發(fā)了');// 阻止事件進(jìn)一步傳播e.cancelBubble = true;}function p2Event(e){console.log('p2自定義的事件被觸發(fā)了');}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自定義的事件被觸發(fā)了');console.log('事件對(duì)象的事件類型: ' + e.type);console.log('事件是由腳本創(chuàng)建的: ' + (!e.isTrusted));} div3.addEventListener('upbubbles3', div3Event, true);div3.dispatchEvent(ev3);var a1 = document.getElementById('a1');a1.addEventListener('click', function(e){e.preventDefault();console.log('是否取消了事件的默認(rèn)行為: ' + e.defaultPrevented);});</script></body> </html>14.2. 效果圖
總結(jié)
