JS事件对象大汇总

JS事件对象

1.什么是事件对象

事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁。

2.事件传播机制（也称事件流）

总体来说，事件传播机制分为三个阶段：
（1）capture phase（捕获阶段）：就是事件从window开始一层一层向目标传递的阶段。
（2）target phase（目标阶段）：当事件到达事件发生现场的阶段，该阶段将执行事件。
（3）bubble phase（冒泡阶段）：和事件捕获阶段相反，事件从目标到window传递的阶段。

3.创建事件对象

event = new Event(eventType, options);

Event构造函数接受两个参数。第一个参数eventType是字符串，表示事件的名称；第二个参数options是一个对象，表示事件对象的配置。该对象主要有下面两个属性。
（1）bubbles：布尔值，可选，默认为false，表示事件对象是否冒泡。
（2）cancelable：布尔值，可选，默认为false，表示事件是否可以被取消，即能否用Event.preventDefault()取消这个事件。一旦事件被取消，就好像从来没有发生过，不会触发浏览器对该事件的默认行为。

var span = document.querySelector('span');
function callback(event) {
    var tag = event.currentTarget.tagName;
    console.log('Tag: ' + tag); 
}
span.addEventListener('click', callback, false);
var clickspan = new Event('click');
//dispatchEvent允许发送事件到监听器上,即可手动触发事件
span.dispatchEvent(clickspan);   //SPAN

4.注册监听事件

为了给HTML中的dom添加属性，使用标准事件实现方式（DOM2）来注册监听事件：

let box= document.getElementById('box')；
box.addEventListener('click', function (e) {
		//e就是事件执行时自动产生的事件对象event object
        e.preventDefault();
        alert('box');
    }, true);
//基本用法
dom.addEventListener(eventType, callback, useCapture);

说明：

1. useCapture属性默认为false，即禁止在事件捕获阶段就执行回调函数。
2. e.preventDefault（）用法：通知浏览器不要执行与事件关联的默认动作。

另外还有：

• e.stopPropagation()：不再派发事件，即禁止冒泡。
• e.cancelBubble=true：也可以设置是否冒泡
• e.currentTarget:属性返回事件当前所在的节点，即正在执行的监听函数所绑定的那个节点。
• e.target:属性返回原始触发事件的那个节点，即事件最初发生的节点。

// HTML代码为
// <p id="para">Hello <em>World</em></p>
function hide(e) {
  console.log(this === e.currentTarget);  // 总是 true
  console.log(this === e.target);  // 有可能不是 true
  e.target.style.visibility = 'hidden';
}

para.addEventListener('click', hide, false);

5. 注册事件监听的方法

1. 在HTML代码中绑定事件

   <div onclick="eventHandler(e)"></div>
   

2. 使用ele.onclick

   div.onclick = function(e){
   	/**/
   }
   

3. 使用addEventListener()

   div.addEventListener("click", function(){
   	/**/
   })