1. document.createEvent() 方法创建一个 event 对象。

    • 一个参数，表示要创建事件类型的字符串

  2. DOM节点调用 dispatchEvent() 分派事件

    • 参数传event对象

      模拟鼠标事件

      createEvent() 传入 “MouseEvents” 参数，返回 event 对象

  • event对象 initMouseEvent()方法，15个参数与鼠标事件的 event 对象参数一一对应

    • type（字符串）：要触发的事件类型，如 “click”。
    • bubbles（布尔值）：表示事件是否冒泡。为精确模拟鼠标事件，应该设置为 true。
    • cancelable（布尔值）：表示事件是否可以取消。为精确模拟鼠标事件，应该设置为 true。
    • view（AbstractView）：与事件关联的视图。基本上始终是 document.defaultView。
    • detail（整数）：关于事件的额外信息。只被事件处理程序使用，通常为 0。
    • screenX（整数）：事件相对于屏幕的 x 坐标。
    • screenY（整数）：事件相对于屏幕的 y 坐标。
    • clientX（整数）：事件相对于视口的 x 坐标。
    • clientY（整数）：事件相对于视口的 y 坐标。
    • ctrlkey（布尔值）：表示是否按下了 Ctrl 键。默认为 false。
    • altkey（布尔值）：表示是否按下了 Alt 键。默认为 false。
    • shiftkey（布尔值）：表示是否按下了 Shift 键。默认为 false。
    • metakey（布尔值）：表示是否按下了 Meta 键。默认为 false。
    • button（整数）：表示按下了哪个按钮。默认为 0。
    • relatedTarget（对象）：与事件相关的对象。只在模拟 mouseover 和 mouseout 时使用。

      模拟键盘事件

      createEvent() 传入”KeyboardEvent” 参数，返回 event对象
      event对象 initKeyboardEvent() 方法，

  • type（字符串）：要触发的事件类型，如 “keydown”。

  • bubbles（布尔值）：表示事件是否冒泡。为精确模拟键盘事件，应该设置为 true。
  • cancelable（布尔值）：表示事件是否可以取消。为精确模拟键盘事件，应该设置为 true。
  • view（AbstractView）：与事件关联的视图。基本上始终是 document.defaultView。
  • key（字符串）：按下按键的字符串代码。

Firefox 可以在 createEvent() 转入”KeyEvents” 参数，返回 event 对象
event 对象 initKeyEvent() 方法，

  • type（字符串）：要触发的事件类型，如 “keydown”。
  • bubbles（布尔值）：表示事件是否冒泡。为精确模拟键盘事件，应该设置为 true。
  • cancelable（布尔值）：表示事件是否可以取消。为精确模拟键盘事件，应该设置为 true。
  • view（AbstractView）：与事件关联的视图，基本上始终是 document.defaultView。
  • ctrlkey（布尔值）：表示是否按下了 Ctrl 键。默认为 false。
  • altkey（布尔值）：表示是否按下了 Alt 键。默认为 false。
  • shiftkey（布尔值）：表示是否按下了 Shift 键。默认为 false。
  • metakey（布尔值）：表示是否按下了 Meta 键。默认为 false。
  • keyCode（整数）：表示按下或释放键的键码。在 keydown 和 keyup 中使用。默认为 0。
  • charCode（整数）：表示按下键对应字符的 ASCII 编码。在 keypress 中使用。默认为 0。

    模拟其他事件

    createEvent() 方法并传入 “HTMLEvents”，再使用返回对象的 initEvent() 方法来初始化。
    1. let event = document.createEvent("HTMLEvents"); 
    2. event.initEvent("focus", true, false); 
    3. target.dispatchEvent(event);

    HTML 事件在浏览器中很少使用，因为它们用处有限。

自定义 DOM 事件

createEvent(“CustomEvent”) ，返回的对象包含 initCustomEvent() 方法

  • type（字符串）：要触发的事件类型，如 “myevent”。
  • bubbles（布尔值）：表示事件是否冒泡。
  • cancelable（布尔值）：表示事件是否可以取消。
  • detail（对象）：任意值。作为 event 对象的 detail 属性。

如果使用 initCustomEvent() 初始化时将事件指定为可以冒泡，所以浏览器会负责把事件冒泡到 document。

IE 事件模拟

IE8及早期

  1. 使用 document 对象的 createEventObject() 方法来创建 event 对象，返回通用 event 对象。
  2. 手工给返回的对象指定希望该对象具备的所有属性。（没有初始化方法）
  3. 在事件目标上调用 fireEvent() 方法, 两个参数
    • 事件处理程序名字
    • event 对象