Dom 事件监听 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p id="p1">here</p>
        
        
        <div id="div1">
            <p id="p2">
                div+p+bubbing;
            </p>
        </div>
        
        
        <div id="div2">
            <p id="p3">
                div+p+capturing;
            </p>
        </div>
        
        <button type="button" id="btn1">moveListen</button>
        
        <script type="text/javascript"  src="Dom_listen.js">
            
        </script>
    </body>
</html>
//不会覆盖已有的事件处理程序 依次执行
    document.getElementById("p1").addEventListener("click",clickFun);
    function clickFun(){
        alert("Hello World");
    }
    document.getElementById("p1").addEventListener("click",clickFun1);
    function clickFun1(){
        alert("Hello");
    }
//向window对象添加
    //当用户调整窗口大小时触发的事件监听器：
    window.addEventListener("resize",winFun);
    function winFun(){
        alert("resize");
    }
    
//事件传播 俩种：冒泡和捕获
    //冒泡 先处理内侧再外侧  默认 FALSE
    //捕获 先外侧再内侧          true
    document.getElementById("div1").addEventListener("click",divFun,false);
    document.getElementById("p2").addEventListener("click",pFun,false);
    function divFun(){
        console.log("div");
    }
    function pFun(){
        console.log("p");
    }
    
    document.getElementById("div2").addEventListener("click",divFun,true);
    document.getElementById("p3").addEventListener("click",pFun,true);
    
//移除监听事件
    document.getElementById("btn1").addEventListener("click",btnFun);
    function btnFun(){
        document.getElementById("p1").removeEventListener("click",clickFun);
    }

 

posted @ 2022-03-21 18:26  lwx_R  阅读(153)  评论(0)    收藏  举报