通用triggerEvent方法

假設有一個id爲testA的a元素，而後有如下代碼(jquery已存在)：

$(document).ready(function(){
		
	$('#testA').on('testEvent', function(e,data1,data2,data3){
		console.log(e,data1,data2,data3);
	});
	
	var ba = document.getElementById('testA');
	ba.addEventListener('testEvent', function(e){
		console.log(e);
	});

});

即，用兩種方法監聽一個自定義事件：testEvent，再看看如何觸發testEvent事件：

document.addEventListener('click', function(e){
	$('#testA').trigger('testEvent', [2,3,4]);
});

實際上只有用on監聽的才能起做用，就是說用jquery的方法trigger來發事件，就只能用jquery的方法on[或者其餘.click(handler)之類的]來監聽事件，而用js原生的addEventListener方法是不行的。

爲解決上面的問題，咱們能夠這樣：

var evt = new Event('testEvent');
var ba = document.getElementById('testA');
ba.dispatchEvent(evt);

若是要帶上自定義數據，能夠這樣：

var evt = new CustomEvent('testEvent',{detail:[2,3,4],a:1,b:3});
var ba = document.getElementById('testA');
ba.dispatchEvent(evt);

而後在事件處理函數中，能夠經過event.detail來訪問須要的數據，但event對象裏面沒有a，b屬性，此處不清楚內部緣由，是否是隻有一個detail屬性可用也不得而知。更多的說明能夠看這裏：https://developer.mozilla.org/en-US/docs/Web/API/Document/createEvent

 

上面的方法在firefox，chrome上可行，但IE8及如下版本瀏覽器不可行，下面來處理IE的問題。

IE8發事件函數用的是fireEvent，建立事件對象用的是document.createEventObject()，看下面的代碼：

var evt = document.createEventObject();
evt.x = 100;
evt.y = 200;
evt.button = 1;
evt.z = 34;
ba.fireEvent('onclick', evt);

注意，我把testEvent換成了onclick，由於IE8不支持自定義事件。

接下來實現通用的發事件方法，若是要兼容IE8，那麼就不能發送自定義事件：

function triggerEvent(element,eventType){
	var e;
	if(element.dispatchEvent){//正常狀況
		e = new Event(eventType);
		element.dispatchEvent(e);
	}else if(element.fireEvent){//IE
		e = document.createEventObject();
		e.button = 1;
		element.fireEvent('on'+eventType,e);
	}else if(element['on'+eventType]){
		element['on'+eventType].call();
	}
}

上面的方法，若是在IE8及如下版本中運行是沒法發送自定義事件的。若是容許用jquery的trigger方法，仍是用jquery比較方便。