事件模型详解编程语言

addEventListener(event, function, useCapture)

removeEventListener(event, function, useCapture)

useCapture为true，在捕获阶段执行，从外到里触发；

useCapture为false，在冒泡阶段执行（默认），从里到外触发；

event.target和event.currentTarget

target在事件流的目标阶段（指向触发事件监听的对象）；

currentTarget在事件流的捕获，目标及冒泡阶段（指向添加事件监听的对象）；

只有当事件流处在目标阶段的时候，两个的指向才是一样的；

而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件活动的对象（一般为父级）。

this指向事件监听对象；

event.stopPropagation() // 停止冒泡

event.preventDefault() // 阻止默认事件

event.stopImmediatePropagation()，阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上，这个方法不接受任何参数；

var event = new Event( 自定义事件  

 

// Listen for the event. elem.addEventListener( 自定义事件 , function (e) { ... }, false); 

 

// Dispatch the event. elem.dispatchEvent(event); 

 

CustomEvent 接口可以为 event 对象添加更多的数据；detail属性可用于传递自定义数据： 

 

var event = new CustomEvent( 自定义事件 , {  detail : elem.dataset.time }); 

下面的代码允许你在事件监听器中访问更多的数据： 

 

function eventHandler(e) { 

 log( The time is:   + e.detail); 

}

onpageshow类似于onload，不过前者是每次加载页面都触发，后者只在第一次加载执行，event.persisted可以判断是从服务器读取（false）还是缓存读取（true）； 

原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/7509.html