JavaScript自定义事件广播与订阅

最新推荐文章于 2024-04-28 16:41:42 发布

周公挚友

最新推荐文章于 2024-04-28 16:41:42 发布

阅读量2.9k

点赞数 1

分类专栏：原创保存文章标签：前端 javascript 自定义事件 Js广播订阅

本文链接：https://blog.csdn.net/a1272146/article/details/71268104

版权

原创同时被 2 个专栏收录

21 篇文章 1 订阅

订阅专栏

保存

20 篇文章 0 订阅

订阅专栏

昨天写聊天室用到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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript自定义事件广播与订阅

昨天写聊天室用到nodejs的event模块，今天也用JavaScript前端的 event写一个，通过一次触发，全局响应，接下来做单页应用，尝试不以传统方式进行事件处理，改为以自定义event进行处理，看看对传统单页应用的与我的想法在实际实施上有什么区别和影响。<!DOCTYPE html><html><head lang="zh-CN"> <meta charset="UTF-8">
复制链接

扫一扫