JavaScript自定义事件广播与订阅

来源：互联网发布：淘宝银泰百货旗舰店编辑：程序博客网时间：2024/06/03 16:37

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