天天看点

javaScript事件监听addEventListener和attachEvent的兼容性和区别

元素.addEventListener(‘事件类型’,事件处理函数,冒泡还是捕获)不写on

元素.attachEvent(‘事件类型’,事件处理函数)要写on

元素.removeEventListener(事件类型,处理函数):不支持IE9以下的浏览器

元素.detachEvent(事件类型,处理函数):只支持IE9以下的浏览器

if(div1.attachEvent){

//只支持IE9以下的浏览器

            div1.attachEvent("onclick",fn1)

           div1.attachEvent("onclick",fn2)

          div1.attachEvent("onclick",fn3)

//注:输出结果是fn1 fn2 fn3

        }else{

//在非IE7 8 执行

            div1.addEventListener("click",fn1)

            div1.addEventListener("click",fn2)

            div1.addEventListener("mouseover",fn3)

        }

 //输出结果是:fn3 fn2 fn1

两者的区别:

  •  参数的个数不同:addEventListener有3个参数,attachEvent有2个
  • 事件类型的书写不同
  • 执行顺序不同:有多个addEventListener时,是从上往下执行;attachEvent则相反
  • 执行的浏览器不同:attachEvent只在IE7 IE8执行

事件传播、阻止事件传播案例:

<style>
        div{
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        p{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        span{
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }
    </style>
           
<div>
        <p>
            <span></span>
        </p>
    </div>
           
<script>
        //获取操作对象
        var div1=document.querySelector("div")
        var p1=document.querySelector("p")
        var span=document.querySelector("span")

        //分别给以上操作对象绑定点击事件
        // div1.onclick=fn1
        // p1.onclick=fn2
        // span.onclick=fn3

        div1.addEventListener?div1.addEventListener("click",fn1,false):div1.attachEvent('onclick',fn1)
        if(p1.addEventListener){
            //false表示冒泡
            p1.addEventListener("click",fn2,false)
        }else{
            p1.attachEvent("onclick",fn2)
        }
        if(span.addEventListener){
            span.addEventListener("click",fn3,false)
        }else{
            span.attachEvent("onclick",fn3)
        }
        

        function fn1(){
            console.log('hello')
        }
        function fn2(e){
            var e = e || window.event
            console.log("world")
            //阻止事件传播
            e.stopPropagation?e.stopPropagation():e.cancelBubble=true
        }
        function fn3(e){
            var e = e || window.event
            console.log("大家好")
            //阻止事件传播
            e.stopPropagation?e.stopPropagation():e.cancelBubble=true
        }
       
    </script>
           

继续阅读