事件是一种叫做观察者的设计模式，这是一种创建松散耦合代码的技术。对象可以发布事件，用来表示在该对象生命周期中有某个有趣的时刻到了。然后其他对象可以观察该对象，等待这些有趣的时刻到来，并通过运行代码来响应。 观察者模式由两类对象组成：主体和观察者。主体负责发布事件，同时观察者通过订阅这些事件来观察该主体。该模式的一个关键概念是主体不知道观察者的任何事情，也就是说它可以独自存在并正常运作即使观察者不存在。从另一方面来说，观察者知道主体并能注册时间的回调函数（事件处理程序）。

1. 事件的创建

js中，最简单的创建事件的方法，是使用Event构造器： 但是为了能够传递数据，就需要使用 CustomEvent 构造器：

  1.     // var myEvent = new Event("event_name");
  3.     var myEvent = new CustomEvent("event_name", {
  4.       detail: {
  5.         //将需要传递的数据写在detail中，以便在EventListener中获取
  6.         //数据将会在event.detail中获取到
  7.         username: "钢铁侠",
  8.         age: 18,
  9.         sex: '男'
  10.       }
  11.     })

2. 事件的监听

JS的EventListener是根据事件的名称来进行监听的，比如我们在上文中已经创建了一个名称为‘event_name’ 的事件，那么当某个元素需要监听它的时候，就需要创建相应的监听器：

  1.         //事件的监听
  2.     window.addEventListener("event_name", function(event){
  3.       console.log("得到数据为：", event.detail);
  4.     })

至此，window对象上就有了对‘event_name’ 这个事件的监听器，当window上触发这个事件的时候，相关的callback就会执行。

3. 事件的触发

对于一些内置（built-in）的事件，通常都是有一些操作去做触发，比如鼠标单击对应MouseEvent的click事件，利用鼠标（ctrl+滚轮上下）去放大缩小页面对应WheelEvent的resize事件。 然而，自定义的事件由于不是JS内置的事件，所以我们需要在JS代码中去显式地触发它。方法是使用 dispatchEvent 去触发（IE8低版本兼容，使用fireEvent）：

  1.     // var myEvent = new Event("event_name");
  3.     var myEvent = new CustomEvent("event_name", {
  4.       detail: {
  5.         //将需要传递的数据写在detail中，以便在EventListener中获取
  6.         //数据将会在event.detail中获取到
  7.         username: "钢铁侠",
  8.         age: 18,
  9.         sex: '男'
  10.       }
  11.     })
  13.     //事件的监听
  14.     window.addEventListener("event_name", function(event){
  15.       console.log("得到数据为：", event.detail);
  16.     })
  18.     //随后在对应的元素上触发该事件
  19.     if(window.dispatchEvent){
  20.       window.dispatchEvent(myEvent);
  21.     }else{
  22.       window.fireEvent(myEvent);
  23.     }

需要特别注意的是，当一个事件触发的时候，如果相应的element及其上级元素没有对应的EventListener，就不会有任何回调操作。对于子元素的监听，可以对父元素添加事件托管，让事件在事件冒泡阶段被监听器捕获并执行。这时候，使用event.target就可以获取到具体触发事件的元素。