浅谈Javascript事件模拟(2)


  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的事件模拟更容易让人记忆和接受,统一的事件模型可以带来一些便捷。

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdjydf.html