Javascript自定义事件

自定义事件的理解

在JS中事件是JS与浏览器交互的主要途径。事件是一种叫做观察者的设计模式，这是一种创建松散耦合代码的技术。对象可以发布事件，用来表示在该对象生命周期中某个有趣的时刻到了。然后其他对象可以观察该对象，等待这些有趣的时刻到来并通过运行代码来响应。
观察者模式有两类对象组成：主题和观察者。主体负责发布事件，同时观察者通过订阅这些事件来观察该主体。该模式的一个关键概念是主体并不知道观察者的任何事情，也就是说它可以独自存在并正常运作即使观察者不存在。从另一方面说，观察者知道主体并能注册事件的回调函数（事件处理程序）。涉及DOM上时，DOM元素便是主体，你的事件处理代码便是观察者。
事件是与DOM交互的最常见的方式，但它们也可以用于非DOM代码中----通过实现自定义事件。自定义事件背后的概念是创建一个管理事件的对象，让其他对象监听那些事件。说简单点就是我们希望在程序运行的时候，路线可能会有很多，如果程序运行到了一个特殊的地方，我们希望立刻运行用户注册的方法里面的代码，运行完毕后再继续运行，这个过程叫做监听。

如何自定义事件

第一种方式是自己模拟事件结构， 我们平时监听事件的时候就是一种观察者模式，

<input onclick="clickhanler()">
function clickhandler(){
	console.log("ok")
}

handler订阅了他的点击事件，button是观察者主体，

第二种方式如下

event = new Event(type,eventInit)

type:创建事件的名称
eventInit：
"bubbles"：可选，Boolean类型，默认值为 false，表示该事件是否冒泡。
"cancelable"：可选，Boolean类型，默认值为 false， 表示该事件能否被取消。
"composed"：可选，Boolean类型，默认值为 false，指示事件是否会在影子DOM根节点之外 触发侦听器。

var event = new Event(type,eventInit)
document.dispatchEvent(event)
//事件也可以任何元素触发不仅仅document

1:用document.createEvent()创建事件对象

2:initEvent()初始化事件。

3:监听触发事件

第三种：

var event = new CustomEvent("build",{detail:"yzq"}) //区别
ele.addEventListener("build",function(e){...}.false)
elem.dispatchEvent(event)

所谓的事件自定义实际跟其他事件同宗同源，只是名字类型不一样罢了