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