菜鸟笔记-JS自定义事件、自动触发事件、模拟用户操作（点击等）

在有些情况下，我们需要程序逻辑自动触发元素的事件，例如js提供了click()，form提供了reset(),submit()等方法！在jquery中提供了trigger()方法帮助我们自动触发事件。还有就是为了满足特定的需求，比如模块之间的通信，传递信息，提供了几种自定义事件的几种方式

自定义事件的方式：

1. Event()构造函数，创建一个新的事件对象Event
2. CustomEvent()创建一个自定义事件（可以在web worker中使用）
3. document.createEvent()创建一新的事件，随之必须调用自身的init方法进行初始化。

1.Event

event = new Event(typeArg, eventInit);

是DOMString 类型，表示所创建事件的名称。

eventInit可选
是 EventInit 类型的字典，接受以下字段:

• “bubbles”，可选，Boolean类型，默认值为 false，表示该事件是否冒泡。
• “cancelable”，可选，Boolean类型，默认值为 false， 表示该事件能否被取消。
• “composed”，可选，Boolean类型，默认值为 false，指示事件是否会在影子DOM根节点之外触发侦听器。
• 注意：ie尚为实现。

// 创建一个支持冒泡且不能被取消的look事件
 
var ev = new Event("look", {"bubbles":true, "cancelable":false});
document.dispatchEvent(ev);
 
// 事件可以在任何元素触发，不仅仅是document
myDiv.dispatchEvent(ev);

2.CustomEvent

CustomEvent(
  DOMString type,
  optional CustomEventInit eventInitDict
)

type 事件的类型名称.

CustomEventInit eventInitDict 一个对象,提供了事件的配置信息.

bubbles：一个布尔值,表明该事件是否会冒泡.

cancelable：一个布尔值,表明该事件是否可以被取消.

detail：当事件初始化时传递的数据.

// 添加一个适当的事件监听器
obj.addEventListener("cat", function(e) { process(e.detail) })
 
// 创建并分发事件
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}})
obj.dispatchEvent(event)

3.document.createEvent(eventTyep)

eventType：

• HTMLEvents：包括 ‘abort’, ‘blur’, ‘change’, ‘error’, ‘focus’, ‘load’,
  ‘reset’, ‘resize’, ‘scroll’, ‘select’, ‘submit’, ‘unload’.

• UIEevents ：包括 ‘DOMActivate’, ‘DOMFocusIn’, ‘DOMFocusOut’, ‘keydown’,‘keypress’, ‘keyup’.

• MouseEvents：包括 ‘click’, ‘mousedown’, ‘mousemove’, ‘mouseout’,
  ‘mouseover’, ‘mouseup’.

• MutationEvents:包括 ‘DOMAttrModified’, ‘DOMNodeInserted’,
  ‘DOMNodeRemoved’,‘DOMCharacterDataModified’,‘DOMNodeInsertedIntoDocument’, ‘DOMNodeRemovedFromDocument’, ‘DOMSubtreeModified’.

实例：

    document.body.addEventListener("veb",function(e){
             alert(e.eventType)
    })
    var event = document.createEvent('HTMLEvents');
    // initEvent接受3个参数：
    //  定义事件名，是否冒泡，是否阻止浏览器的默认行为
    event.initEvent("veb", false, true);
    //通过eventType传递事件信息，自定义
    event.eventType="I love Veblen"
    //触发document上绑定的click事件
    document.body.dispatchEvent(event);

js自定义事件
js自动触发事件&&自定义事件 Event
题外笔记
js提供了click()，方法可以用来模拟鼠标左键单击一个元素。
在支持click方法的元素上使用该方法时，会触发该元素的的点击事件。该事件会一直向文档树的上层元素冒泡，也会触发他们各自的click事件
语法

element.click()

Example
模拟一个点击，当鼠标悬浮到CheckBox上时

HTML

<form>
        <input type="checkbox" id="icb" onmousemove="myFunction()" onclick="alert('click event occured')">
 </form>

JavaScript

  function myFunction(){
        document.getElementById("icb").click();
    }

form提供了reset()
form 有个方法是 reset()，作用不是清空 标签中的所有输入栏，而是回到上一次载入页面时的状态。

document.querySelector('#input-form').reset()

其他模拟事件
1.按键模拟：https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/initKeyEvent
2.UI事件模拟：https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/initUIEvent