2020-9：DOM的浏览器兼容性问题/IE的事件处理和W3C的事件处理有哪些区别

1）事件模型

• DOM（3个阶段）：
  ① 外向内：捕获
  ② 目标触发
  ③ 内向外：冒泡执行
  

• IE8（2个阶段）：
  没有捕获阶段
  ① 目标触发
  ② 内向外：冒泡执行

2）事件绑定：

• DOM: elem.addEventListener(‘click’, function(){}, false)，第3个参数capture – 是否在捕获阶段就提前触发，默认为false，即都在冒泡阶段后触发
• IE8: elem.attachEvent(‘onclick’, function(){})

3）移除事件：

• DOM：elem.removeEventListener(‘click’, function(){}, false) // 绑定时写了几个参数，移除时也要写几个参数，且参数必须保持一致
• IE8：elem.detachEvent(‘onclick’, function(){}))

4）获得事件对象的方法：

• DOM：elem.addEventListener(‘click’, function(e){})，e指向event
• IE8：不会自动传入事件对象e，事件对象event始终保存在一个全局变量window.event中，elem.attachEvent(‘onclick’, function(){ var e = window.event })

    // 兼容所有浏览器的写法
    e = e || window.event

5）获得目标元素

• DOM：e.target
• IE8：e.srcElement

	// 兼容所有浏览器的写法
    var target = e.target || e.srcElement

6）阻止冒泡：

• DOM: e.stopProPagation()
• IE8: e.cancelBubble = true

	// 兼容所有浏览器的写法
    if(e.cancelBubble === undefined){
      // DOM
      e.stopPropagation();
    }else{
      // IE8
      e.cancelBubble = true
    }

7）阻止默认行为:

• DOM: e.preventDefault()
• IE8: 事件处理函数中 return false

	// 兼容所有浏览器的写法
    if(typeof e.preventDefault === 'function'){
      // DOM
       e.preventDefault()
    }else{
      // IE8
      return false
      // 或者 e.returnValue = false
    }