js原生自定义事件

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

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

相关阅读

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

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

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

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

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

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

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

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

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

相关 jQuery自定义事件

一直以为jQuery的bind只能绑定jQuery中的事件，今天从一本书上看到jQuery的bind也能绑定自定义事件。事实上我们可以通过bind绑定一个自定义事件，然后再

太过爱你忘了你带给我的痛/ 2022年03月28日 11:52/ 0 赞/ 358 阅读

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

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

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

相关 js 怎样自定义事件

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

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

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

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

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

相关 vue——自定义事件

每个 Vue 实例都实现了[事件接口][Link 1]，即：使用 `$on(eventName)` 监听事件使用 `$emit(eventName)` 触发事

﹏ヽ暗。殇╰゛Y/ 2021年09月14日 12:54/ 0 赞/ 440 阅读

相关 js自定义事件

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

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

相关 js原生自定义事件

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

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