事件模型的详解

这次给大家带来事件模型的详解,使用事件的详解的注意事项有哪些,下面就是实战案例,一起来看一下。

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

相信看了本文案例你已经掌握了方法,更多精彩请关注智伍应用其它相关文章!

推荐阅读:

event loop如何使用

JavaSript事件冒泡和事件捕获如何实现

以上就是事件模型的详解的详细内容,更多请关注智伍应用其它相关文章!