2017.08.16

New

• HTML事件处理程序、DOM0级、DOM2级

• IE 事件绑定

  // 添加事件： attachEvent(eventName, handlerFun)
  node.attachEvent('onclick', function() { return this==window});
  // 移除事件： detachEvent(eventName, handlerFun)
  

• 跨浏览器事件绑定的解决方案

  // 绑定事件
  function addHandler() {
  if(el.addEventListener) {
    el.addEventListener('click', handler, false); // 事件冒泡， IE9 和大部分新浏览器
  } else if(el.attachEvent) {
    el.attachEvent('onclick', handler); // IE
  } else {
    el.onclick = handler; // DOM0 级事件绑定： 支持所有浏览器
  }
  }
  // 移除事件
  function removeHandler() {
  if(el.removeEventListener) {
    el.removeEventListener('click', handler, false);
  } else if (el.detachEvent) {
    el.detachEvent('onclick', handler);
  } else {
    el.onclick = null;
  }
  }
  

• DOM 和 IE中的 event 事件对象不一致

• IE 事件对象常见属性

  event.srcElement (event.target)
  event.type
  event.returnValue： 取消事件的默认行为，默认为 true ( event.preventDefault() )
  event.cancelBubble：取消事件的冒泡，默认为false ( event.stopPropagation() )
  

• 跨浏览器事件对象的解决方案

  // 1. 获取不同浏览器的事件对象
  function getEvent(event) {
  return event ? event : window.event;
  }
  // 2. 获取目标对象
  functin getTarget(event) {
  return event.target || event.srcElement;
  }
  // 3. 阻止默认行为
  function preventDefault(event) {
  if (event.preventDefault) {
    event.preventDefault()
  } else {
    event.returnValue = false;
  }
  }
  // 4. 阻止事件冒泡
  function stopPropagation(event) {
  if (event.stopPropagation) {
    event.stopPropagation()
  } else {
    event.cancelBubble = true;
  }
  }