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>