昨天寫聊天室用到nodejs的event模塊，今天也用JavaScript前端的 event寫一個，通過一次觸發，全局響應，接下來做單頁應用，嘗試不以傳統方式進行事件處理，改為以自定義event進行處理，看看對傳統單頁應用的與我的想法在實際實施上有什么區別和影響。
<!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="點我"> <script> //自定義test1事件 var ev1 = new Event('t1', {bubbles: 'true', cancelable: 'true'});
ev1.aaa='ev1'; //創建event的對象實例。 var ev2 = document.createEvent('HTMLEvents'); // 3個參數：事件類型，是否冒泡，是否阻止瀏覽器的默認行為 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