js原生自定义事件

痛定思痛。 2021-08-30 18:20 502阅读 0赞

html

<button id="btn">按钮</button>
    <div id="m"></div>
    <div id="n"></div>

1.  Event 无参数传递

let btn = document.getElementById("btn");
            let m = document.getElementById("m");
            let n = document.getElementById("n");
            btn.addEventListener("click", function() { 
                let clickA = new Event("clickA");
                document.dispatchEvent(clickA);
            })
            document.addEventListener("clickA", function(e) { 
                m.innerHTML = "(123,234)";
            })
            document.addEventListener("clickA", function(e) { 
                n.innerHTML = "你点击了按钮";
            })

1.  CustomEvent 可传递参数

let btn = document.getElementById("btn");
            btn.addEventListener("click", function() { 
                document.dispatchEvent(new CustomEvent('myEvent', { 
                    detail: "我是传递的内容"
                }))
            })
            document.addEventListener("myEvent", function(e) { 
                console.log(222, e.detail);
            })

总结: 自定义事件 其实就是一个观察者模式的实现

发表评论取消回复

表情：

评论列表（有 0 条评论，502人围观）

还没有评论，来说两句吧...

相关阅读

相关自定义事件

![1190185-20190927105629328-286278136.png][] 解释：上面2说的是自定义事件不适合用在爷爷向孙子层层传递数据（隔代）。也不适合兄弟

桃扇骨/ 2023年08月17日 17:10/ 0 赞/ 208 阅读

相关 vue自定义组件添加使用原生事件

自定义组件(Components)是vue的重要知识块之一，使用中不少人会发现一个问题：为什么我在组件里绑定click事件不起作用？这里先看看原因吧。在自定义组件中直接绑

柔情只为你懂/ 2023年07月04日 15:46/ 0 赞/ 21 阅读

相关 js自定义事件

废话不多说看代码，一目了然注意：监听一定要在触发之前，不然监听无效 <div id="444" >自定义事件</div> var dom = d

小咪咪/ 2023年06月21日 05:56/ 0 赞/ 16 阅读

相关原生js制作扫雷-自定义难度

游戏功能： 1、有四个难度 2、可以自定难度 1、html相关代码 <!DOCTYPE html> <html lang="en">

阳光穿透心脏的1/2处/ 2023年01月09日 15:31/ 0 赞/ 153 阅读

相关 JS基础-事件模型(事件&事件流&自定义事件&事件冒泡/代理)

文章目录一、事件与事件流二、事件模型 1.DOM0级模型 2.IE事件模型 3.DOM2级模型 4.

谁践踏了优雅/ 2022年11月14日 10:13/ 0 赞/ 391 阅读

相关原生js打造自定义播放器

用到的技术，主要是video的相关知识：实现的功能是去掉自带的控制条，按自己想要的形式设置视频的控制条：有播放与暂停（play()方法和pause()方法）、拖拽控制条控制视频

亦凉/ 2022年05月27日 06:17/ 0 赞/ 224 阅读

相关原生JS实现自定义滚动条

浏览器带给我们的滚动条 .test{ width: 300px; height: 100px;

约定不等于承诺〃/ 2022年02月27日 02:26/ 0 赞/ 483 阅读

相关 js 怎样自定义事件

js自定义事件还是非常有用的，可以用来模拟一些点击操作之类的,或者用来实现组件之间的通信 new Event即可得到一个事件对象，注意需要传入参数，这个参数就是你的事件

喜欢ヅ旅行/ 2021年12月09日 16:55/ 0 赞/ 338 阅读

相关 js自定义事件

HTML5开发有时需要实现自定义事件，如预加载图片需要知道加载进度事件，本篇以图片预加载功能为例，介绍如何实现自定义事件。下面的ImgsLoader工具类，可以实现多图片预

左手的ㄟ右手/ 2021年09月12日 07:20/ 0 赞/ 532 阅读

相关 js原生自定义事件

html <button id="btn">按钮</button> <div id="m"></div> <div id="n"></div> 1.

痛定思痛。/ 2021年08月30日 18:20/ 0 赞/ 503 阅读