DOM IE 兼容性 I

IE8事件模型和DOM事件模型有何不同？如何处理DOM事件模型与IE8事件模型的兼容性？

1 事件模型不一样

　　　　DOM的浏览器兼容性问题：事件模型 3个阶段 01 外向内：捕获 02 目标触发 03内向外：冒泡

　　　　IE8: 2个阶段：没有捕获阶段，只有两个阶段。目标触发和冒泡阶段

2事件绑定不一样　　

　　　　　　DOM: elem.addEventListener(“click”,function(){},false) 第三个参数capture: 是否在捕获阶段就提前触发

　　　　　　IE8: elem.attachEvent(“onclick”,function(){}) 事件名一定要用on开头

3移除事件　　　

　　　　DOM: elem.removeEventListener(“click”,function(){},false)

　　　　 IE: elem.detachEvent(“onclick”,function(){})

4获取事件对象event的方法

　　　　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; ---- kan sao babao

兼容所有浏览器的写法:

　　　　if(e.cancelBubble!==undefined){ //IE8

　　　　　　e.cancelBubble=true;

　　　　}else{ //DOM

　　　　　　e.stopPropagation()

　　　　　　}

7阻止默认行为

　　　　DOM: e.preventDefault();

　　　　IE8 : return false; 或者 e.returnValue = false;

　　　　if(typeof e.preventDefault!=='function'){

　　　　　　　　 e.returnValue = false;

　　　　}else{

　　　　　　e.preventDefault()

　　　　}

<!DOCTYPE html>

<html lang="en">

<head>

      <meta charset="UTF-8">

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <meta http-equiv="X-UA-Compatible" content="ie=edge">

      <title>Document</title>

</head>

<body>

      <button id="btn">点击</button>

<script>

 // 定义一个函数，可以支持所有浏览器中的处理函数绑定:

      function bindEvent(elem, eventName, handler){

          if(elem.addEventListener){//DOM

                  elem.addEventListener(eventName,handler)

                  alert('dom')

      }else{//IE8

          elem.attachEvent('on'+eventName,function(){

        //this->elem

          alert('ie')

        var e=window.event;

        e.target=e.srcElement;

        handler.call(this,e)

      })

      }

      }

      bindEvent(btn, 'click', function(e){

         this //当前事件冒泡到的父元素

         var target=e.target; //目标元素

      })

</script>

</body>

</html>

巴特西

DOM IE 兼容性 I

最新文章

热门文章