学习笔记 2020-11-16

JavaScript 高级程序设计(第4版) 阅读记录

事件

事件处理程序

DOM2 事件处理程序

IE 事件处理程序

1. attachEvent()
2. detachEvent()

IE 中的事件处理程序作用域是在全局。多个事件监听触发顺序是逆序。

跨浏览器事件处理程序

事件对象

DOM 事件对象

所有事件对象的公共属性和方法：

• bubbles
• cancelable
• currentTarget
• defaultPrevented
• detail
• eventPhase
• preventDefault()
• stopImmediatePropagation()
• stopPropagation()
• target
• trusted
• type
• View

事件处理程序内部，this 对象始终等于 currentTarget 的值。

IE 事件对象

1. DOM0

   function () {
     let e = window.event;
   }

2. attachEvent()

   function (event) {
     // event === window.event
   }

IE 事件对象的公共属性和方法：

• cancelBubble
• returnValue
• srcElement
• type

跨浏览器事件对象

var EventUtil = {
  addHandler: function (element, type, handler) {
    if (element.addEventListener) {
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
      element.attachEvent('on' + type, handler);
    } else {
      element['on' + type] = handler;
    }
  },
  getEvent: function (event) {
    return event ? event : window.event;
  },
  getTarget: function (event) {
    return event.target || event.srcElement;
  },
  preventDefault: function (event) {
    if (event.preventDefault) {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  },
  removeHandler: function (element, type, handler) {
    if (element.removeEventListener) {
      element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
      element.detachEvent('on' + type, handler);
    } else {
      element['on' + type] = null;
    }
  },
  stopPropagation: function (event) {
    if (event.stopPropagation) {
      event.stopPropagation();
    } else {
      event.cancelBubble = true;
    }
  }
};