js原生自定义事件

html

<button id="btn">按钮</button> <div id="m"></div> <div id="n"></div> 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 = "你点击了按钮"; }) 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); })

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