Web Event接口

一、定义：Event接口表示在DOM中发生的任何事情；一些是用户生成的（如用户点击鼠标，按下键盘等，都会生成一个事件），一些是由其它API生成的（如动画结束事件，过渡结束，视频播放被暂停等...）。事件通过由外部源触发，也可由编程方式触发，例如ele.click(),触发一个单击事件，或者通过定义事件，然后使用eleTarget.dispatch(event)分发一个事件。

二、DOM元素注册事件处理函数的方法

• 通过事件监听器addEventListener

myButton.addEventListener('click', function(){alert('Hello world');}, false);

• html的属性 on[事件名]

<button onclick="alert('Hello world!')">

• DOM元素的属性

myButton.onclick = function(event){alert('Hello world');};

三、Event对象常用属性

• event.bubbles  返回一个布尔值，表明前事件是否会向DOM树上层元素冒泡.
• event.cancelable 返回一个布尔值，表明该事件是否可以被取消默认行为, 如果该事件可以用 preventDefault() 可以阻止与事件关联的默认行为，则返回 true，否则为 false
• event.currentTarget  返回当事件沿着 DOM 触发时事件的当前目标，它总是指向事件绑定的元素
• event.target  返回事件触发的元素
• event.timestamp  返回事件发生的时间戳
• event.type  返回一个字符串，表示当前事件的类型
• event.eventPhase  返回一个整数值，代表当前执行阶段。【0】、这个时间段，没有事件被处理。【1】、事件正在被目标元素的祖先对象在处理，这个处理过程从Window开始，然后Document, 然后是HTMLHtmlElement, 一直这样，直到目标元素的父元素。 通过EventTarget.addEventListener() 注册为捕获模式的Event Listener 被调用。【2】、事件对象已抵达event.target目标对象，为这个阶段注册的事件监听被调用， 如果 Event.bubbles 的值为false, 对事件对象的处理在这个阶段后就会结束。【3】、事件对象逆向向上传播回目标元素的祖先元素, 从父亲元素开始，并且最终到达包含元素 Window，这就是冒泡，并且只有Event.bubbles值为true的时候才会发生。 为这个阶段注册的Event listeners在这个过程中被触发。

四、编程式触发事件以MouseEvent为例

var btn = document.createElement('button')
var event = new MouseEvent('click',{
    bubbles:true,
    cancelable:true
})
btn.dispatchEvent(event)
btn.addEventListener('click',function(){})