Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

JavaScript主动触发事件在浏览器上的差异

  主动触发事件是一个经常会用到的技巧,它很重要。它和事件绑定一样存在着浏览器兼容性问题。传统浏览器(IE8-)使用createEventObject来创建事件对象,用fireEvent这个方法来触发事件;现代浏览器用createEvent来创建对象,用dspatchEvent来触发事件。 //获取浏览器版本
var isIE=navigator.userAgent.match(/MSIE (\d)/i);
isIE=isIE?isIE[1]:undefined;

//事件函数
function onclick(e){
  e=e||event;
  alert(e.msg||"表酱紫啦,人家羞涩啦~");
};

//给document绑定一个点击事件
isIE<9
  //传统浏览器使用attachEvent
  ?document.attachEvent("onclick",onclick)
  //现代浏览器使用addEventListner
  :document.addEventListener("click",onclick,false);

//触发自定义事件
if(isIE<9){
  //传统浏览器
  //创建对象
  var event=document.createEventObject();
  //给事件对象添加属性
  event.msg="我是fireEvent触发的";
  //触发事件
  document.fireEvent("onclick",event);
}else{
  //现代浏览器
  //创建事件对象
  var e=document.createEvent("MouseEvents");
  //初始化事件对象
  e.initMouseEvent("click"),
  //给事件对象添加属性
  e.msg="我是despatchEvent触发的";
  //触发事件
  document.dispatchEvent(e);
};

  看完这个代码,就基本上能懂它们的用法了吧。触发一个事件的流程就是先创建事件对象,然后调用元素的触发事件函数,把事件对象作为参数传递过去。下面来说说传统浏览器和现代浏览器中他们的区别。
  在传统浏览器中使用createEventObject创建一个事件对象,这没啥好说的。后面给事件对象添加属性就和普通的对象添加属性一样也没啥好说的。关键是最后这个触发这个事件的函数fireEvent,它的第一个参数是事件类型,记得事件前面要加on,就和绑定事件的时候一样。第二个参数是用来把你前面创建的事件对象传递过去的,这个可以为空。如果为空,系统就会自己创建一个空事件对象。第三个参数是一个出口参数,它会保存用户是否把事件取消了,这个基本不会用到,如果想了解就去看官方文档。文章的最后会给出本文相关的官方文档,有些地方有文字描述不明白的可以在官方文档中找到详细资料。
  现代浏览器中的事件类型是在事件的初始化事件的时候指定的,当然,在createEvent的时候有一个更泛的类型参数,其实这个只是用来初始化事件对象的默认属性而已,即使用KeyboardEvents也可以触发鼠标事件,但是要注意init的时候要和createEvent的参数对应上。因为如果用MouseEvents参数创建事件对象,那么创建出来的对象就没有initKeyboard这个方法,这样会会导致你初始化调用错误。我是不推荐这样胡来的,是什么事件就用什么方式做。不过有HTMLEvent和initEventinit这个组合是通用事件,如果嫌麻烦可以用它。接着是初始化(init*)的使用一般只用第一个参数指定事件类型,其他参数根据创建的类型不同而不同。这些参数不会常用到,没必要全背下来,除非你是变态,需要的时候去查文档就可以了。最后的dispatchEvent就没啥好说的了,把事件对象传递过去就可以了。这个方法的参数也不止一个,后买还有指定允许冒泡和允许取消两个参数。因为这些文档里面有我就没必要浪费口舌去说了。
  下面回头说说传统浏览器的自定义事件触发问题。就像JavaScript本身无法查看对象的事件绑定列表一样,我们也不能在传统浏览器中触发自定义事件。但是有时候就是必须用到手动触发自定义事件,这时候你就必须时候某个框架来实现它比如jQuery。jQuery内部有自己的事件列表所以只要是用jQuery给对象绑定的事件都能在它内部找到。你可以用trigger这个方法来触发它绑定的函数。就像这样 $(document).on("myevent",function(){
  alert("啊啦,我被调用了。TvT。。");
}).trigger("myevent");

  这里先用on(低版本jQuery使用bind)绑定了一个事件,然后再用trigger去触发它。至于trigger的参数当然也不止一个,具体你可以在jQuery的手册中找到。没有手册的可以去本站的下载频道下载。

  ps:今天下雪了,好冷啊,打字打的双手冰凉。。。

参考文档:
  MSDN createEventObject
  MSDN fireEvent
  MDN createEvent
  MDN dispatchEvent
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^