事件基礎

阿新 • • 發佈：2020-09-14

事件的原理--自定義事件--拋發事件

        //事件拋發
        //首先給div0 新增一個我們沒見過的事件 也就是e.type
        div0.addEventListener("chilema",fn1);
        //例項化事件物件，並且建立一個chilema的事件
        var evt=new Event("chilema");
        //div0 自己拋發這個事件，並執行fn1
        div0.dispatchEvent(evt);

        function fn1(){
            console.log("我吃了");
        }

事件預設是由冒泡觸發的，通過Elelement.addEventHandeterLister("click",clickHandler,ture); 第三個引數來修改，預設是flase 捕獲不觸發

事件觸發由三個階段組成

　　1.捕獲階段，在經過捕獲階段時，是由最外層 document 往內部進行捕獲（事件也可以由捕獲觸發）

　　2.目標階段　　到達目標

　　3.冒泡階段　　到達目標後在由內向外冒泡觸發事件(預設)

    <script>
        //獲取div0 div1 div2 DOM
        var div0=document.querySelector(".div0");
         
var div1=document.querySelector(".div1");
        var div2=document.querySelector(".div2");
        //新增事件監聽  其中e 是滑鼠事件  e.target 是目標物件  e.currentTarget和this一樣都是偵聽物件
        div0.addEventListener("click",clickHandler0);
        function clickHandler0(e){
            console.log(e.target,e.currentTarget,this 
);
        }

        div1.addEventListener("click",clickHandler1);
        function clickHandler1(e){
            console.log(e.target,e.currentTarget,this);
        }


        div2.addEventListener("click",clickHandler2);
        function clickHandler2(e){
            console.log(e.target,e.currentTarget,this);
        }
</script>

上述程式碼，當我們點選最裡面的div2的時候，e.currentTarget的 div2、div1、div0 事件是由內向外觸發的--也就是冒泡觸發

我們來修改程式碼，把事件監聽的第三個引數改成true

    <script>
        //獲取div0 div1 div2 DOM
        var div0=document.querySelector(".div0");
        var div1=document.querySelector(".div1");
        var div2=document.querySelector(".div2");
        //新增監聽事件，在捕獲階段觸發
        div0.addEventListener("click",clickHandler0,true);
        function clickHandler0(e){
            console.log(e.target,e.currentTarget,this);
        }

        div1.addEventListener("click",clickHandler1,true);
        function clickHandler1(e){
            console.log(e.target,e.currentTarget,this);
        }

        div2.addEventListener("click",clickHandler2,true);
        function clickHandler2(e){
            console.log(e.target,e.currentTarget,this);
        }

    </script>

以上程式碼e.currentTarget就顯示的 div0、div1、div2 也就是說在捕獲階段觸發的事件

案例1: 當我們點選div2的時候讓每個元素，沒過1秒後背景顏色依次變成透明的

 <script>

        var div0=document.querySelector(".div0");
        var div1=document.querySelector(".div1");
        var div2=document.querySelector(".div2");
        var num=1;
        
        
        div0.addEventListener("click",clickHandler0);
        function clickHandler0(e){
            //setTimeOut  有三個引數，第一個是引數：回撥函式，第二個引數是多少秒後執行，第三個引數可以傳遞一個引數進去，
            //之後可以在第一個引數 回撥函式中接受  重要
            
            setTimeout(function (div){
                //這養設定透明  整體都會透明
                // div.style.opacity="0.2";
                //當我們點選事件的時候，我們一次讓這些元素 沒過一秒 背景顏色變成透明的
                div.style.backgroundColor="rgba(255,0,0,0.2)";
            },num*1000,this);
            num++;
        }

        div1.addEventListener("click",clickHandler1);
        function clickHandler1(e){
            setTimeout(function (div){
                div.style.backgroundColor="rgba(0,255,0,0.2)";
            },num*1000,this);
            num++;
        }

        div2.addEventListener("click",clickHandler2);
        function clickHandler2(e){
            setTimeout(function (div){
                div.style.backgroundColor="rgba(0,0,255,0.2)";
            },num*1000,this);
            num++;
        }

    </script>

案例二：綜合上面案例，我們可不可以，先讓div0變透明，在是div2 ，再是div1呢---那隻要把div0 設定捕獲階段觸發就好了

<script>

        var div0=document.querySelector(".div0");
        var div1=document.querySelector(".div1");
        var div2=document.querySelector(".div2");
        var num=1;
        
        
        div0.addEventListener("click",clickHandler0,true);
        function clickHandler0(e){
            //setTimeOut  有三個引數，第一個是引數：回撥函式，第二個引數是多少秒後執行，第三個引數可以傳遞一個引數進去，
            //之後可以在第一個引數 回撥函式中接受  重要
            
            setTimeout(function (div){
                //這養設定透明  整體都會透明
                // div.style.opacity="0.2";
                //當我們點選事件的時候，我們一次讓這些元素 沒過一秒 背景顏色變成透明的
                div.style.backgroundColor="rgba(255,0,0,0.2)";
            },num*1000,this);
            num++;
        }

        div1.addEventListener("click",clickHandler1);
        function clickHandler1(e){
            setTimeout(function (div){
                div.style.backgroundColor="rgba(0,255,0,0.2)";
            },num*1000,this);
            num++;
        }

        div2.addEventListener("click",clickHandler2);
        function clickHandler2(e){
            setTimeout(function (div){
                div.style.backgroundColor="rgba(0,0,255,0.2)";
            },num*1000,this);
            num++;
        }

    </script>