事件模型

IE事件模型（没有捕获）（<＝ie8）

1. attachEvent(event, function)
   detachEvent(event, function)
   第一个参数为on+'event';
2. 目标对象event.srcElement；
3. this会指向window；
4. event.cancelBubble = true   // 停止冒泡
   event.returnValue = false    //  阻止默认事件

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

1. addEventListener(event, function, useCapture)
   removeEventListener(event, function, useCapture)
   useCapture为true，在捕获阶段执行，从外到里触发；
   useCapture为false，在冒泡阶段执行（默认），从里到外触发；
2. event.target和event.currentTarget
   target在事件流的目标阶段（指向触发事件监听的对象）；
   currentTarget在事件流的捕获，目标及冒泡阶段（指向添加事件监听的对象）；
   只有当事件流处在目标阶段的时候，两个的指向才是一样的；
   而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件活动的对象（一般为父级）。
3. this指向事件监听对象；
4. event.stopPropagation()  //  停止冒泡
   event.preventDefault()    //   阻止默认事件
5. 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）； 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有