欢迎来到 jackNEss'窝窝
I like simple mind

js主动触发事件研究

2012年06月27日

js主动触发事件研究

最近项目中遇到这样一个需求,点击A对象,触发B对象的onclick事件,这样一个需求刚开始的时候还以为比较简单,原来这里面涉及的知识点可多了,而且很多都是平时很少接触的方法,下面来分析一下。

用 call() 方法实现

这是我刚开始的想法,例如 对象 miku 、 agent,而 点击 agent 的时候 想触发 miku 的 onclick 事件,我们可以这样写:

//javascript document;
var dc = document;
var miku = dc.getElementById("miku");
var agent = dc.getElementById("agent");
miku.onclick = function(){
	alert("hello, you have already clicked miku");
}

//keycode
agent.onclick = function(){
	miku.onclick.call(miku);
}

经过测试也十分地顺利,然后考虑到通用性,将之整合为一个通用的方法去:

//javascript document
function triggerEvent(target,type){
	return target["on" + type].call(target);
}

调用方法:

agent.onclick = function(){
	triggerEvent(miku,"click");
}

参考例子:http://www.jackness.org/lab/2012/triggerevent/demo01.html

但是在应用的过程中很遗憾的发现,这种方法并不支持 通过 addEventListener 或者 attachEvent 绑定的事件。

参考例子:http://www.jackness.org/lab/2012/triggerevent/demo02.html

通过 createEvent() 实现

发现自己想到的方法行不通 只好google了,在很多坑爹的文章中找到了一个关键的信息: 标准浏览器可以通过 createrEvent() 来实现。

//javascript document
function triggerEvent(target,type){
	var evt = document.createEvent("HTMLEvents");
	evt.initEvent(type,false,true);
	target.dispatchEvent(evt);
}

createElement()

createElement() 将创建一种新的事件类型,该类型由参数 eventType 指定。注意,该参数的值不是要创建的事件接口的名称,而是定义那个接口的 DOM 模块的名称。

语法

//javascript document
createElement(eventType);
参数 描述
eventType string类型
想获取的 Event 对象的事件模块名。
关于有效的事件类型列表,请参阅“说明”部分。

下表列出了 eventType 的合法值和每个值创建的事件接口:

参数 事件接口 初始化方法
HTMLEvents HTMLEvent iniEvent()
MouseEvents MouseEvent iniMouseEvent()
UIEvents UIEvent iniUIEvent()

返回值

返回新创建的 Event 对象,具有指定的类型。

关于 createrEvent() 方法的介绍这里有 传送门,在这里就不说了

不过,遗憾的是,对于传统浏览器(IE8,7,6…),并不支持 createEvent() 方法。幸好的是,IE有自己的一套方法

IE 的私有方法 fireEvent()

微软在其DOM中为每个元素实现了一个fireEvent方法。我们知道HTML的事件onXXX可以由系统(IE环境)来管理和触发,也可以直接执行事件的handler,比如onclick,如果被赋予事件处理函数,我们可以用element.onclick()来执行事件处理函数。

fireEvent() 方法,简单点来说,假如有 A,B 2个对象 若 B对象的 onclick 事件中 调用了 A 对象 的 fireEvent(),即:

//javascript document
var A = document.getElementById("aElement");
var B = document.getElementById("bElement");

A.onclick = function(){ alert("it's A element onclick event~")};
B.onclick = funtion(){ A.fireEvent("onclick");}

在上述例子中 fireEvent() 方法 并不是 调用了 A 的 onclick(),而是 模拟了 A的 onclick() 事件, 就是说 你点击 B对象的时候 其实 就是 你的那个点击操作 从B对象 转移到A对象 去了。这种 在 冒泡事件的时候就能更清楚的区分 2者的区别。

fireEvent() 方法的相关介绍,可以点击 这里 进行查看。

//javascript document
function triggerEvent(target,type){
	target.fireEvent("on" + type);
}

不过 经过测试发现 IE9 通过 addEventListener 添加的方法,并不能通过 fireEvent() 进行激活。

全浏览器兼容的解决方案

下面代码是将上面 ie 和 标准浏览器的方法进行整合后得出的 通用函数。

//javascript document
function triggerEvent(target,type){
	if(document.createEvent){
		var evt = document.createEvent("HTMLEvents");
		evt.initEvent(type,false,true);
		target.dispatchEvent(evt);
	}
	else if(document.createEventObject){
		target.fireEvent("on" + type);
	}
	
}

参考例子:http://www.jackness.org/lab/2012/triggerevent/demo03.html

分类javascript
阅读 616
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS