昨天写聊天室用到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