关于vue.js:自定义事件的触发dispatchEvent

一、element.dispatchEvent()
对于规范浏览器，其提供了可供元素触发自定义事件的办法：element.dispatchEvent().。
不过，在应用该办法之前，咱们还须要做其余两件事，即创立和初始化。

document.createEvent()
event.initEvent()
element.dispatchEvent()
举个例子：var dom = document.querySelector('#id')
dom.addEventListener('alert', function (event) {console.log(event)
}, false);
 
// 创立
var evt = document.createEvent("HTMLEvents");
// 初始化
evt.initEvent("alert", false, false);

// 触发, 即弹出文字
dom.dispatchEvent(evt);
1、createEvent()
createEvent() 办法返回新创建的 Event 对象，反对一个参数，示意事件类型，具体见下表：

参数

2、initEvent()
initEvent()办法用于初始化通过 DocumentEvent 接口创立的 Event 的值。

反对三个参数：initEvent(eventName, canBubble, preventDefault)
别离示意：

• 事件名称
• 是否能够冒泡
• 是否阻止事件的默认操作

3、dispatchEvent()

dispatchEvent()就是触发执行了，dom.dispatchEvent(eventObject)
参数 eventObject 示意事件对象，是 createEvent()办法返回的创立的 Event 对象。

二、自定义事件
1、Event
自定义事件的函数有 Event、CustomEvent 和 dispatchEvent

// 向 window 派发一个 resize 内置事件
window.dispatchEvent(new Event(‘resize’))

// 间接自定义事件，应用 Event 构造函数：
var event = new Event(‘build’);
var elem = document.querySelector(‘#id’)
// 监听事件
elem.addEventListener(‘build’, function (e) {…}, false);
// 触发事件.
elem.dispatchEvent(event);
2、CustomEvent
CustomEvent 能够创立一个更高度自定义事件，还能够附带一些数据，具体用法如下：

var myEvent = new CustomEvent(eventname, options);
其中 options 能够是：

{
  detail: {...},
  bubbles: true,    // 是否冒泡
  cancelable: false // 是否勾销默认事件
}

其中 detail 能够寄存一些初始化的信息，能够在触发的时候调用。其余属性就是定义该事件是否具备冒泡等等性能。

内置的事件会由浏览器依据某些操作进行触发，自定义的事件就须要人工触发。
dispatchEvent 函数就是用来触发某个事件：

element.dispatchEvent(customEvent);
下面代码示意，在 element 下面触发 customEvent 这个事件。
联合起来用就是：

// add an appropriate event listener
obj.addEventListener("cat", function(e) {process(e.detail) });
 
// create and dispatch the event
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}});
obj.dispatchEvent(event);

应用自定义事件须要留神兼容性问题，而应用 jQuery 就简略多了：

// 绑定自定义事件
$(element).on('myCustomEvent', function(){});
 
// 触发事件
$(element).trigger('myCustomEvent');
// 此外，你还能够在触发自定义事件时传递更多参数信息：$("p").on("myCustomEvent", function( event, myName) {$( this).text(myName + ", hi there!");
});
$("button").click(function () {$( "p").trigger("myCustomEvent", [ "John"] );
});

3、IE 浏览器
因为向下很多版本的浏览器都不反对 document.createEvent()办法，因而咱们须要另辟蹊径（据说 IE 有 document.createEventObject()和 event.fireEvent()办法，然而不反对自定义事件~~）。
IE 浏览器有不少自力更生的货色，例如上面要说的这个 ”propertychange” 事件，顾名思意，就是属性扭转即触发的事件。
例如文本框 value 值扭转，或是元素 id 扭转，或是绑定的事件扭转等等。

dom.evtAlert = "2012-04-01";
<br>dom.attachEvent("onpropertychange", function(e) {if (e.propertyName == "evtAlert") {fn.call(this);
    }
});

这个，当咱们须要触发自定义事件的时候，只有批改 DOM 上自定义的 evtAlert 属性的值即可：

dom.evtAlert = Math.random().toString(36).substr(2)
此时就会触发 dom 上绑定的 onpropertychange 事件，又因为批改的属性名正好是 ”evtAlert”, 于是自定义的 fn 就会被执行。这就是 IE 浏览器下事件触发实现的残缺机制，应该说讲得还是蛮细的。

三、自定义事件的删除
与触发事件不同，事件删除，各个浏览器都提供了对应的事件删除办法，如 removeEventListener 和 detachEvent。
不过呢，对于 IE 浏览器，还要多删除一个事件，就是为了实现触发性能额定减少的

onpropertychange 事件：dom.detachEvent("onpropertychange", evt);

var fireEvent = function(element,event){if (document.createEventObject){ 
       // IE 浏览器反对 fireEvent 办法 
       var evt = document.createEventObject(); 
       return element.fireEvent('on'+event,evt) 
   } 
   else{ 
       // 其余规范浏览器应用 dispatchEvent 办法 
       var evt = document.createEvent('HTMLEvents'); 
       evt.initEvent(event, true, true); 
       return !element.dispatchEvent(evt); 
   } 
}; 

参考：http://www.zhangxinxu.com/wor…