`
bossdai
  • 浏览: 5944 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Chrome , Firfox 对应IE fireEvent 的方法

阅读更多
Chrome , Firfox 不支持fireEvent的方法
可以使用dispatchEvent的方法替代, 直接给一个兼容的Code.
触发click 事件
function simulateClick(el) {
  var evt;
  if (document.createEvent) { // DOM Level 2 standard
    evt = document.createEvent("MouseEvents");
    evt.initMouseEvent("click", true, true, window,
      0, 0, 0, 0, 0, false, false, false, false, 0, null);

    el.dispatchEvent(evt);
  } else if (el.fireEvent) { // IE
    el.fireEvent('onclick');
  }
}
触发drag事件
function simulateDrag(el) {
  var evt;
  if (document.createEvent) { // DOM Level 2 standard
    evt = document.createEvent("MouseEvent");
    evt.initMouseEvent("dragstart", true, true, window,
      0, 0, 0, 0, 0, false, false, false, false, 0, null);

    el.dispatchEvent(evt);
  } else if (el.fireEvent) { // IE
    el.fireEvent('ondragstart');
  }
}

事件是用来描述网页中某一特定有趣时刻的,众所周知事件通常是在由用户和浏览器进行交互时触发,其实不然,通过Javascript可以在任何时间触发特定的事件,并且这些事件与浏览器创建的事件是相同的。这就意味着会有适当的事件冒泡,并且浏览器会执行分配的事件处理程序。这种能力在测试web应用程序的时候,是非常有用的,在DOM 3级规范中提供了方法来模拟特定的事件,IE9 chrome FF Opera 和 Safari都支持这样的方式,在IE8及以前的办法的IE浏览器有他自己的方式来模拟事件
a)Dom 事件模拟
  可以通过document上的createEvent()方法,在任何时候创建事件对象,此方法只接受一个参数,既要创建事件对象的事件字符串,在DOM2 级规范上所有的字符串都是复数形式,在DOM 3级事件上所有的字符串都采用单数形式,所有的字符串如下:
  UIEvents:通用的UI 事件,鼠标事件键盘事件都是继承自UI事件,在DOM 3 级上使用的是 UIEvent。
  MouseEvents:通用的鼠标事件,在DOM 3 级上使用的是 MouseEvent。
  MutationEvents:通用的突变事件,在DOM 3 级上使用的是 MutationEvent。
  HTMLEvents:通用的HTML事件,在DOM3级上还没有等效的。
注意,ie9是唯一支持DOM3级键盘事件的浏览器,但其他浏览器也提供了其他可用的方法来模拟键盘事件。
一旦创建了一个事件对象,就要初始化这个事件的相关信息,每一种类型的事件都有特定的方法来初始化,在创建完事件对象之后,通过dispatchEvent()方法来将事件应用到特定的dom节点上,以便其支持该事件。这个dispatchEvent()事件,支持一个参数,就是你创建的event对象。
b)鼠标事件模拟
  鼠标事件可以通过创建一个鼠标事件对象来模拟(mouse event object),并且授予他一些相关信息,创建一个鼠标事件通过传给createEvent()方法一个字符串“MouseEvents”,来创建鼠标事件对象,之后通过iniMouseEvent()方法来初始化返回的事件对象,iniMouseEvent()方法接受15参数,参数如下:
  type string类型 :要触发的事件类型,例如‘click’。
  bubbles Boolean类型:表示事件是否应该冒泡,针对鼠标事件模拟,该值应该被设置为true。
  cancelable bool类型:表示该事件是否能够被取消,针对鼠标事件模拟,该值应该被设置为true。
  view 抽象视图:事件授予的视图,这个值几乎全是document.defaultView.
  detail int类型:附加的事件信息这个初始化时一般应该默认为0。
  screenX int类型 : 事件距离屏幕左边的X坐标
  screenY int类型 : 事件距离屏幕上边的y坐标
  clientX int类型 : 事件距离可视区域左边的X坐标
  clientY int类型 : 事件距离可视区域上边的y坐标
  ctrlKey Boolean类型 : 代表ctrol键是否被按下,默认为false。
  altKey Boolean类型 : 代表alt键是否被按下,默认为false。
  shiftKey Boolean类型 : 代表shif键是否被按下,默认为false。
  metaKey Boolean类型: 代表meta key 是否被按下,默认是false。
  button int类型: 表示被按下的鼠标键,默认是零.
  relatedTarget (object) : 事件的关联对象.只有在模拟mouseover 和 mouseout时用到。

值得注意的是,initMouseEvent()的参数直接与event对象相映射,其中前四个参数是由浏览器用到,只有事件处理函数用到其他的参数,当事件对象作为参数传给dispatch()方式,target属性将会自动被赋上值。下面是一个例子,
  var btn = document.getElementById(“myBtn”);
  var event = document.createEvent(“MouseEvents”);
  event.initMouseEvent(“click”, true, true, document.defaultView, 0, 0, 0, 0, 0,false, false, false, false, 0, null);
  btn.dispatchEvent(event);
在DOM实现的浏览器中,所有其他的事件都包括dbclick,都可以通过相同的方式来实现。
c)键盘事件模拟
  值得注意的是键盘事件已经从DOM2级事件中移出了,起初在DOM2级事件的草案版中,键盘事件是作为草案的一部分的,但在最终版被移出了,FF已经实现了草案版中的键盘事件,值得注意的是在DOM3级事件中实现的键盘事件与DOM2级事件草案版中的键盘事件还是存在很大差异的。
在dom3级事件中创建一个键盘事件对象是通过createEvent()方法,并传入KeyBoardEvent字符串作为参数,对返回的event对象,调用initKeyBoadEvent()方法初始化,初始化键盘事件的参数有以下几个:
  type (string) - 要触发的事件类型,例如“keydown”.
  bubbles (Boolean) — 代表事件是否应该冒泡.
  cancelable (Boolean) — 代表事件是否可以被取消.
  view (AbstractView) — 被授予事件的是图. 通常值为:document.defaultView.
  key (string) — 按下的键对应的code.
  location (integer) — 按下键所在的位置. 0 :默认键盘, 1 左侧位置, 2 右侧位置, 3 数字键盘区, 4 虚拟键盘区, or 5 游戏手柄.
  modifiers (string) — 一个有空格分开的修饰符列表.
  repeat (integer) — 一行中某个键被按下的次数.
请注意的是,在DOM3事件中,费掉了keypress事件,因此按照下面的方式,你只能模拟键盘上的keydown 和 keyup事件。
  var textbox = document.getElementById(“myTextbox”),event;
    if (document.implementation.hasFeature(“KeyboardEvents”, “3.0”)){
      event = document.createEvent(“KeyboardEvent”);
      event.initKeyboardEvent(“keydown”, true, true, document.defaultView, “a”,0, “Shift”, 0);
    }
    textbox.dispatchEvent(event);

在FF下,允许你通过使用document.createEvent('KeyEvents'),这种方式来创建键盘事件,初始化的方法为initKeyEvent(),这个方法接受10个参数,
  type (string) — 要触发的事件类型,例如“keydown”.
  bubbles (Boolean) — 代表事件是否应该冒泡.
  cancelable (Boolean) — 代表事件是否可以被取消.
  view (AbstractView) — 被授予事件的是图. 通常值为:document.defaultView.
  ctrlKey (Boolean) — 代表ctrol键是否按下. 默认 false.
  altKey (Boolean) — 代表alt键是否按下. 默认 false.
  shiftKey (Boolean) — 代表shift键是否按下. 默认 false.
  metaKey (Boolean) — 代表meta键是否按下. 默认 false.
  keyCode (integer) — 键按下或释放时键所对应的键码. 默认是0;
  charCode (integer) — 按下的键的字符所对应的ASCII code.是共keypress事件使用的 默认是0.
D)模拟其他事件
鼠标事件和键盘事件是在浏览器中最长被模拟的事件,,但是某些时候同样需要模拟突变事件和HTML事件。可以用createEvent('MutationEvents'),来创建一个突变事件对象,可以采用initMutationEvent()来初始化这个事件对象,参数包括type, bubbles, cancelable, relatedNode, prevValue,
newValue, attrName, 和attrChange.可以采用下面的方式来模拟一个突变事件:
  var event = document.createEvent('MutationEvents');
  event.initMutationEvent(“DOMNodeInserted”, true, false, someNode, “”,””,””,0);
  target.dispatchEvent(event);
对于HTML事件,直接上代码。
  var event = document.createEvent(“HTMLEvents”);
  event.initEvent(“focus”, true, false);
  target.dispatchEvent(event);
对于突变事件和HTML事件是很少在浏览器中用到,因为他们收应用程序的限制。
E)定制DOM事件
在DOM3级事件中定义了一类事件称之为 custom event,我称之为客户事件,客户事件不会原生的被dom触发,而是直接提供,以至于开发者可以创建他们自己的事件,你可以创建一个自己的客户事件,通过调用createEvent('CustomEvent'),对返回的事件对象调用,initCustomEvent()方法,其中传递四个参数type,bubbles,cancelable,detail。ps:小弟对这部分理解有限,在这里只是抛砖引玉。
F)IE中的事件模拟
从IE8,以及更早版本的IE,都在模仿DOM模拟事件的方式:创建事件对象,初始化事件信息,之后触发事件。当然IE在完成这几个步骤的过程是不同的。
首先不同于dom中创建event对象的方法,IE采用document.createEventObject()方法,并且没有参数,返回一个通用的事件对象,接下来要对返回的event对象赋值,此时ie并没有提供初始化函数,你只能采用物理方法一个一个的赋值,最后在目标元素上调用fireEvent()方法,参数为两个:事件处理的名称和创建的事件对象。当fireEvent方法被调用的时候,event对象的srcElement和type属性将会被自动赋值,其他将需要手动赋值。请看下面的例子:
  var btn = document.getElementById(“myBtn”);
  var event = document.createEventObject();
  event.screenX = 100;
  event.screenY = 0;
  event.clientX = 0;
  event.clientY = 0;
  event.ctrlKey = false;
  event.altKey = false;
  event.shiftKey = false;
  event.button = 0;
  btn.fireEvent(“onclick”, event);
  这个例子创建了一个事件对象,之后通过一些信息初始化该事件对象,注意事件属性的赋值是无序的,对于事件对象来说这些属性值不是很重要,因为只有事件句柄对应的处理函数(event handler)会用到他们。对于创建鼠标事件、键盘事件还是其他事件的事件对象之间是没有区别的,因为一个通用的事件对象,可以被任何类型的事件触发。
  值得注意的是,在Dom的键盘事件模拟中,对于一个keypress模拟事件的结果不会作为字符出现在textbox中,即使对应的事件处理函数已经触发。
  与DOM事件模拟相比,个人觉得IE的事件模拟更容易让人记忆和接受,统一的事件模型可以带来一些便捷。

转自:http://blog.csdn.net/oscar999/article/details/8188442
http://www.cnblogs.com/MrBackKom/archive/2012/06/26/2564501.html
分享到:
评论

相关推荐

    FireFox Chrome IE浏览器调试JavaScript

    ### FireFox Chrome IE浏览器调试JavaScript #### 一、Firebug简介 Firebug是一款专为Firefox浏览器设计的强大开发插件,自推出以来便受到广大Web开发者的喜爱与推崇。随着Web技术的发展,对Web开发人员的要求...

    HttpWatch(支持firfox、IE)

    [1]只需要选择相应的网站,软件就可以对网站与IE之间的需求回复的通讯情况进行分析并在同一界面显示其相应日志记录。每一个HTTP记录都可以详细的分析其 Cookies、消息头、字符查询等信息。支持HTTPS及分析报告输出为...

    一款轻量、无依赖的 相同 name 的表单验证,动态验证,兼容 chrome 、firfox 、IE9 +的JavaScript

    本文将深入探讨一个针对Web应用开发的轻量级JavaScript验证组件,该组件专为处理具有相同name属性的表单字段进行动态验证,并且兼容主流浏览器,包括Chrome、Firefox以及IE9及以上版本。 表单验证是Web应用中不可或...

    兼容ie,firfox,chrome的页面广告随机飘动效果

    这个项目名为"兼容ie, firfox, chrome的页面广告随机飘动效果",旨在实现一个能在主流浏览器(Internet Explorer, Firefox, Chrome)上运行的广告飘动特效,确保跨浏览器的兼容性。这种效果通常通过JavaScript库,...

    firfox和ie6的js执行效率比较

    标题中的“firfox”应该是“Firefox”,这是一款由Mozilla开发的开源网络浏览器,而“ie6”指的是微软的Internet Explorer 6,这是一个较旧版本的IE浏览器。本话题主要探讨的是JavaScript在Firefox和IE6这两款浏览器...

    一个兼容IE、Chrome和Firfox的HTML固定表头例子

    这个示例兼容了三种主流浏览器:Internet Explorer(IE)、Google Chrome和Mozilla Firefox,这涵盖了大部分用户的浏览器环境。 在描述中提到的“博文链接:https://sheng.iteye.com/blog/1199433”,这是一个IT...

    单击其它区域关闭日历控件(兼容firfox与IE)

    "单击其它区域关闭日历控件(兼容firfox与IE)"这个主题涉及到的是一个常见的前端交互功能,即如何通过JavaScript或者特定的库来实现日历控件的交互优化,使其在用户选择日期后能够通过点击页面上的其他区域来关闭。...

    javascript表格可调整列宽(兼容firfox/IE)

    本demo使用jQuery包,实现表格列宽可拖拽功能,并实现页面reset时的重新布局。使用jQuery,方便函数的调用,给要处理的表格添加id 后,直接调用$("#id").movedTh()即可方便实现,修改了firfox的兼容性。

    因纳伟盛firfox、chrome插件安装包1.1.rar

    标题中的“因纳伟盛firfox、chrome插件安装包1.1.rar”指的是一个针对Firefox和Chrome浏览器的插件安装文件,版本为1.1,以RAR格式压缩。这个安装包是由因纳伟盛公司提供的,可能用于增强或扩展浏览器功能,特别是与...

    selenium webdriver+chrome插件.zip

    这个压缩包包含了Selenium IDE的Chrome插件,以及对应的WebDriver驱动程序,即ChromeDriver和GeckoDriver。 Selenium WebDriver是一种自动化测试工具,它允许程序员模拟用户行为,对网页进行自动化操作。在这个场景...

    firfox firfox firfox firfox

    firfoxfirfoxfirfoxfirfoxfirfoxfirfoxfirfoxfirfoxfirfoxfirfoxfirfoxfirfoxfirfoxfirfoxfirfoxfirfoxfirfoxfirfoxfirfoxfirfoxfirfoxfirfoxfirfox

    前端设计IE6IE7IE8IE9FF问题汇总IE和FirFox兼容问题[参照].pdf

    7. **event.x与event.y问题**:IE中的`event.x`和`event.y`在Firefox中不存在,可以用`event.pageX`和`event.pageY`替代。在Firefox中,`event.clientX`和`event.clientY`可以替代`event.x`和`event.y`,它们在...

    firfox最最好用的插件

    标题中的“firfox最最好用的插件”指的是Firefox浏览器的一些最受欢迎和实用的扩展插件。这些插件能够提升Firefox的使用体验,增加各种功能,满足用户的不同需求。以下是各个插件的详细介绍: 1. **Coral IE Tab**:...

    判断当前使用的浏览器版本ie、firfox等

    以上方法可以有效地检测并获取IE和Firefox的版本信息。然而,需要注意的是,随着浏览器的发展,这种基于`userAgent`的检测方式可能会变得不准确,因为现代浏览器会模拟老版本的行为。因此,最佳实践是尽可能使用特性...

    Flex调试工具 IE Firfox

    本文将详细介绍如何在Internet Explorer(IE)和Firefox浏览器中使用Flex调试工具。 1. **Flex Builder集成开发环境**: Flex Builder是Adobe提供的IDE,内置了强大的Flex调试工具。它支持Eclipse平台,提供代码...

    Firefox火狐浏览器官方52.1.1esr-mac版本dmg安装包

    《Firefox火狐浏览器52.1.1esr-mac版本的深度解析与安装指南》 Firefox火狐浏览器,作为一款开源、免费的网络浏览器,以其强大的安全性、隐私保护及高度自定义性深受用户喜爱。52.1.1esr(Extended Support Release...

    firfox and firedebug

    标题中的"Firfox and Firebug"指的是Mozilla Firefox浏览器与Firebug这款强大的JavaScript和网页开发调试工具的组合。Firefox是一款开源的网络浏览器,以其高度可定制性、安全性以及对Web标准的良好支持而广受开发者...

    selenium for firfox安装文件

    selenium for firfox安装文件

    树形菜单javascript(兼容IE,Firfox,刷新记忆)

    它不仅能在Internet Explorer(IE)上运行,还支持Firefox。这在Web开发中是非常重要的,因为用户可能使用各种不同的浏览器来访问网站,所以确保代码在主流浏览器上的兼容性是至关重要的。开发者可能采用了条件注释...

Global site tag (gtag.js) - Google Analytics