IT虾米网

事件模型详解

admin 2018年05月27日 编程语言 151 0

IE事件模型(没有捕获)(<=ie8)

attachEvent(event, function)
detachEvent(event, function)
第一个参数为on+'event';

目标对象event.srcElement;

this会指向window;

event.cancelBubble = true   // 停止冒泡
event.returnValue = false    //  阻止默认事件

标准DOM事件模型(捕获、目标、冒泡)(>ie8)

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); 
}

 一些事件对象

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

发布评论

分享到:

IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

浏览器缓存详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。