js原生自定义事件

痛定思痛。 2021-08-30 18:20 447阅读 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 条评论，447人围观）

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

相关阅读

相关原生js手写音频自定义样式功能

写的代码完整的是这个:不是很好没优化能用拖拽控制播放的进度时间效果如图所示: ![20190925164826424.gif][] <!DOCTYP

雨点打透心脏的1/2处/ 2023年10月09日 12:11/ 0 赞/ 42 阅读

相关自定义事件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 js 怎样自定义事件

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

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

相关 JavaScript 原生js实现自定义消息提示框

效果图 ![js自定义消息弹框][js] 上代码 <!DOCTYPE html> <html lang="en"> <head>

痛定思痛。/ 2021年09月21日 13:08/ 0 赞/ 445 阅读

相关 js自定义事件

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

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

相关 js原生自定义事件

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

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