DOM中事件处理概览与原理的全面解析(3)

事件的代理(delegation):由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件;

五、事件对象(Event):事件发生以后,会生成一个事件对象,作为参数传给监听函数。浏览器原生提供一个Event对象,所有的事件都是这个对象的实例,或者说继承了Event.prototype对象。Event对象本身就是一个构造函数,可以用来生成新的实例。 

var ev = new Event("look", {"bubbles":true, "cancelable":false});
document.dispatchEvent(ev);

Event构造函数接受两个参数。第一个参数是字符串,表示事件的名称;第二个参数是一个对象,表示事件对象的配置。该参数可以有以下两个属性。
bubbles:布尔值,可选,默认为false,表示事件对象是否冒泡。
cancelable:布尔值,可选,默认为false,表示事件是否可以被取消。 

Event对象的属性:
1.与事件的阶段有关: 
bubbles: 只读属性,返回一个布尔值,表示当前事件是否会冒泡,可根据事件是否会冒泡来调用不同的函数。 
eventPhase:返回一个整数值(0,1,2,3之一),表示事件目前所处的状态
<0,事件目前没有发生。
<1,事件目前处于捕获阶段,即处于从祖先节点向目标节点的传播过程中。该过程是从Window对象到Document节点,再到HTMLHtmlElement节点,直到目标节点的父节点为止。
<2,事件到达目标节点,即target属性指向的那个节点。
<3,事件处于冒泡阶段,即处于从目标节点向祖先节点的反向传播过程中。该过程是从父节点一直到Window对象。只有bubbles属性为true时,这个阶段才可能发生 

2.与事件的默认行为有关: 
cancelable:返回一个布尔值,表示事件是否可以取消。如果要取消某个事件,需要在这个事件上面调用preventDefault方法 
defaultPrevented:返回一个布尔值,表示该事件是否调用过preventDefault方法。

3.与事件的目标节点有关: 
currentTarget:返回事件执行的监听函数所绑定的那个节点。 
target:返回触发事件的那个节点。在IE6—IE8之中,该属性的名字不是target,而是srcElement

4.与事件对象的其他信息相关: 
type:返回一个字符串,表示事件类型 
detail:返回一个数值,表示事件的某种信息。具体含义与事件类型有关,对于鼠标事件,表示鼠标按键在某个位置按下的次数,比如对于dblclick事件,detail属性的值总是2 
timeStamp:返回一个毫秒时间戳,表示事件发生的时间。从PerformanceTiming.navigationStart开始计算,即表示距离用户导航至该网页的时间。如果想将这个值转为Unix纪元时间戳,就要计算event.timeStamp + performance.timing.navigationStart
isTrusted:返回一个布尔值,表示该事件是否可以信任。用处不大,不同浏览器的支持不一样。

Event对象的方法: 
preventDefault():取消浏览器对当前事件的默认行为,该方法生效的前提是,事件的cancelable属性为true,如果为false,则调用该方法没有任何效果。 
stopPropagation():终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。注意:该方法不能阻止同一个 Document 节点上的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点 
stopImmediatePropagation():阻止同一个事件的其他监听函数被调用,只要其中有一个监听函数调用了该方法,其他的监听函数就不会再执行了。

参考链接: 
 
https://developer.mozilla.org/zh-CN/docs/Web/API 
JavaScript权威指南第六版

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzxwgs.html