通用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比较方便。

 

posted @ 2015-04-29 23:49  ywxgod  阅读(6129)  评论(0编辑  收藏  举报