javascript事件学习(3)-Event对象
3、事件对象
在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。包含导致事件的元素、事件的类型以及其他与特定事件相关的信息。所有的浏览器都支持event对象,但支持的方式不同。
event对象本身就是一个构造函数,可以用来生成新的实例。
event = new Event(typeArg, eventInit);
Event构造函数接受两个参数。第一个参数是字符串,表示事件名称,第二个参数是一个对象,表示事件对象的配置。
var ev = new Event('click', {'bubble':true, 'cancelable':false}); document.dispatchEvent(ev);
3.1 bubbles, eventPhase
(1)bubbles
bubbles属性返回一个布尔值,表示当前事件是否冒泡,该属性为只读属性,只能在新建事件时改变,默认值为false.
(2)eventPhase
eventPhase属性返回一个整数,表示事件目前所处的节点:1表示捕获阶段,2表示目标阶段,3表示冒泡阶段
3.2 cancelable, defaultPrevented
以下属性与事件的默认行为有关。
(1) cancelable
cancelable属性返回一个布尔值,表示事件是否可以取消。该属性为只读属性,只能在新建事件时改变,Event构造函数生成的对象默认值为false。如果要取消某个事件,需要在这个时间上面调用preventDefault方法,这会阻止浏览器的默认行为。
(2) defaultPrevented
defaultPrevented属性返回一个布尔值,表示该事件是否调用过preventDefault方法。
3.3 currentTarget, target
以下属性与事件的目标节点有关。
currentTarget属性返回事件当前所在的节点,即正在执行的监听函数所绑定的那个节点,而target属性返回事件发生的节点。如果监听函数在捕获阶段和冒泡阶段,那么这两个属性返回的值是不一样的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>currentTarget和target</title> </head> <body> <p id="para1">test<em> currentTarget</em> </p> <p id="para2">test<em> target</em> </p> </body>
<script> var para1 = document.querySelector('#para1'); var para2 = document.querySelector('#para2'); para1.addEventListener('click', hide1, false); para2.addEventListener('click', hide2, false); function hide1(e) { console.log(this === e.currentTarget); //true e.currentTarget.style.visibility = 'hidden'; } function hide2(e) { console.log(this === e.target); //不一定为true e.target.style.visibility = 'hidden'; } </script> </html>
3.4 type, detail, timeStampm isTrusted
以下属性与事件对象的其他信息有关。
(1) type
type属性返回一个 字符串,表示事件类型,具体的值同addEventListener方法的第一个参数相同。
var string = event.type
(2) detail
detail属性返回一个数值,表示事件的某种属性。具体含义与事件类型有关,对于鼠标事件,表示鼠标事件在某个位置按下的次数。
(3) timeStamp
timeStamp属性返回一个毫秒时间戳,表示事件发生的时间
(4) isTrusted
istrusted属性返回一个布尔值,表示该事件是否可以信任。Firefox浏览器中,用户触发的事件会返回true,脚本触发的事件返回false;IE浏览器中,除了使用createEvent方法生成的事件,所有其他事件都返回true;Chrome浏览器不支持该属性。
3.5 preventDefault(), stopPropagation(), stopImmediatePropagation()
(1) preventDefault()
preventDefault方法取消浏览器对当前事件的默认行为,如果cancelable是true,则可以使用该方法。
(2) stopPropagation()
stopPropagation方法阻止事件在DOM中继续传播,防止再触发定义在别的节点上的监听函数,但不包括在当前节点新定义的事件监听函数。
(3) stopImmediatePropagation()
stopImmediatePropagation方法阻止同一个事件的其他监听函数被调用。如果同一个节点对一个事件调用了多个监听函数,这些监听函数将按照顺序执行,但是如果其中一个函数调用了该方法,那么后面的其他函数将不再执行。