广

JavaScript

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

    谈谈Javascript事件模拟

    2018-04-13 09:18:02 次阅读 稿源:互联网
    广告
    这就意味着会有适当的事件冒泡,并且浏览器会执行分配的事件处理程序。这种能力在测试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)

    一起学吧部分文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与一起学吧进行文章共享合作。

    广告
    广告
    广告