Event 对象
概述
事件发生以后,会产生一个事件对象,作为参数传给监听函数。浏览器原生提供一个Event
对象,所有的事件都是这个对象的实例,或者说继承了Event.prototype
对象。
Event
对象本身就是一个构造函数,可以用来生成新的实例。
event = new Event(type, options);
Event
构造函数接受两个参数。第一个参数type
是字符串,表示事件的名称;第二个参数options
是一个对象,表示事件对象的配置。该对象主要有下面两个属性。
bubbles
:布尔值,可选,默认为false
,表示事件对象是否冒泡。cancelable
:布尔 值,可选,默认为false
,表示事件是否可以被取消,即能否用Event.preventDefault()
取消这个事件。一旦事件被取消,就好像从来没有发生过,不会触发浏览器对该事件的默认行为。
var ev = new Event(
'look',
{
'bubbles': true,
'cancelable': false
}
);
document.dispatchEvent(ev);
上面代码新建一个look
事件实例,然后使用dispatchEvent
方法触发该事件。
注意,如果不是显式指定bubbles
属性为true
,生成的事件就只能在“捕获阶段”触发监听函数。
// HTML 代码为
// <div><p>Hello</p></div>
var div = document.querySelector('div');
var p = document.querySelector('p');
function callback(event) {
var tag = event.currentTarget.tagName;
console.log('Tag: ' + tag); // 没有任何输出
}
div.addEventListener('click', callback, false);
var click = new Event('click');
p.dispatchEvent(click);
上面代码中,p
元素发出一个click
事件,该事件默认不会冒泡。div.addEventListener
方法指定在冒泡阶段监听,因此监听函数不会触发。如果写成div.addEventListener('click', callback, true)
,那么在“捕获阶段”可以监听到这个事件。
另一方面,如果这个事件在div
元素上触发。
div.dispatchEvent(click);
那么,不管div
元素是在冒泡阶段监听,还是在捕获阶段监听,都会触发监听函数。因为这时div
元素是事件的目标,不存在是否冒泡的问题,div
元素总是会接收到事件,因此导致监听函数生效。
实例属性
Event.bubbles,Event.eventPhase
Event.bubbles
属性返回一个布尔值,表示当前事件是否会冒泡。该属性为只读属性,一般用来了解 Event 实例是否可以冒泡。前面说过,除非显式声明,Event
构造函数生成的事件,默认是不冒泡的。
Event.eventPhase
属性返回一个整数常量,表示事件目前所处的阶段。该属性只读。
var phase = event.eventPhase;
Event.eventPhase
的返回值有四种可能。
- 0,事件目前没有发生。
- 1,事件目前处于捕获阶段,即处于从祖先节点向目标节点的传播过程中。
- 2,事件到达目标节点,即
Event.target
属性指向的那个节点。 - 3,事件处于冒泡阶段,即处于从目标节点向祖先节点的反向传播过程中。
Event.cancelable,Event.cancelBubble,event.defaultPrevented
Event.cancelable
属性返回一个布尔值,表示事件是否可以取消。该属性为只读属性,一般用来了解 Event 实例的特性。
大多数浏览器的原生事件是可以取消的。比如,取消click
事件,点击链接将无效。但是除非显式声明,Event
构造函数生成的事件,默认是不可以取消的。
var evt = new Event('foo');
evt.cancelable // false
当Event.cancelable
属性为true
时,调用Event.preventDefault()
就可以取消这个事件,阻止浏览器对该事件的默认行为。
如果事件不能取消,调用Event.preventDefault()
会没有任何效果。所以使用这个方法之前,最好用Event.cancelable
属性判断一下是否可以取消。
function preventEvent(event) {
if (event.cancelable) {
event.preventDefault();
} else {
console.warn('This event couldn\'t be canceled.');
console.dir(event);
}
}
Event.cancelBubble
属性是一个布尔值,如果设为true
,相当于执行Event.stopPropagation()
,可以阻止事件的传播。
Event.defaultPrevented
属性返回一个布尔值,表示该事件是否调用过Event.preventDefault
方法。该属性只读。
if (event.defaultPrevented) {
console.log('该事件已经取消了');
}
Event.currentTarget,Event.target
事件发生以后,会经过捕获和冒泡两个阶段,依次通过多个 DOM 节点。因此,任意事件都有两个与事件相关的节点,一个是事件的原始触发节点(Event.target
),另一个是事件当前正在通过的节点(Event.currentTarget
)。前者通常是后者的后代节点。
Event.currentTarget