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>