昨天寫(xiě)聊天室用到nodejs的event模塊，今天也用JavaScript前端的 event寫(xiě)一個(gè)，通過(guò)一次觸發(fā)，全局響應(yīng)，接下來(lái)做單頁(yè)應(yīng)用，嘗試不以傳統(tǒng)方式進(jìn)行事件處理，改為以自定義event進(jìn)行處理，看看對(duì)傳統(tǒng)單頁(yè)應(yīng)用的與我的想法在實(shí)際實(shí)施上有什么區(qū)別和影響。
<!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title></title> </head> <body> <input id="bu1" type="button" value="點(diǎn)我"> <script> //自定義test1事件 var ev1 = new Event('t1', {bubbles: 'true', cancelable: 'true'});
ev1.aaa='ev1'; //創(chuàng)建event的對(duì)象實(shí)例。 var ev2 = document.createEvent('HTMLEvents'); // 3個(gè)參數(shù)：事件類(lèi)型，是否冒泡，是否阻止瀏覽器的默認(rèn)行為 ev2.initEvent('t2', true, true);
ev2.aaa = 'ev2';
document.getElementById("bu1").addEventListener('click', function () { document.dispatchEvent(ev1);
document.dispatchEvent(ev2);
}, false);
(function () { document.addEventListener('t1', function (e) { console.log(e.aaa+1);
}, false); //document上綁定自定義事件oneating document.addEventListener('t2', function (e) { console.log(e.aaa+2);
}, false);
})();
(function () { document.addEventListener('t1', function (e) { console.log(e.aaa+3);
}, false); //document上綁定自定義事件oneating document.addEventListener('t2', function (e) { console.log(e.aaa+4);
}, false);
})();
(function () { document.addEventListener('t1', function (e) { console.log(e.aaa+5);
}, false); //document上綁定自定義事件oneating document.addEventListener('t2', function (e) { console.log(e.aaa+6);
}, false);
})(); </script> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57