原生js:DOM2级事件绑定(addEventListenr和attachEvent之间的区别)重要

傷城~ 2022-03-14 11:46 240阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="box">点我</div>
    <script>
        var box=document.getElementById('box');
        //DOM0级事件绑定
        //给同一个元素的同一个事件行为绑定不同的函数,后面绑定的方法会覆前面的方法
    //    box.onclick=function () {
    //        console.log(1);
    //    }
    //    box.onclick=function(){
    //        console.log(2);
    //    }
    
    
        //DOM2级绑定不能给同一个元素的同一个事件行为绑定同一个方法
    //    function fn(){
    //        console.log(3);
    //    }
    //    box.addEventListener('click',fn,false);
    //    box.addEventListener('click',fn,false);
    
        //DOM级事件绑定可以给同一个元素的同一个事件行为绑定多个方法,谁先绑定谁先执行
    //    function fn1(){
    //        console.log(4);
    //    }
    //    function fn2(){
    //        console.log(5);
    //    }
    //    box.addEventListener('click',fn1,false);
    //    box.addEventListener('click',fn2,false);
    
        function fn(){
            console.log(6);
            console.log(this);//这里面的this指向window
        }
          box.attachEvent('onclick',fn);
          box.attachEvent('onclick',fn);
    
        // 1. 顺序问题； attachEvent绑定的事件方法顺序是倒序的；
        // 2. 重复绑定的问题；可以给同一个元素的同一个事件绑定相同的方法；
        // 3. 函数方法中的this指向window，不指向绑定的那个元素；
        // 元素内置类： HTMLDIVElement-->HTMLElement-->Element-->Node-->EventTarget--->Object
    </script>
    </body>
    </html>
    复制代码