事件註冊與事件代理學習

喜欢看电影的蜗牛發表於2024-06-13
事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="display:grid;gap:0.5em;">
    <!-- 1.透過元素的屬性：on +事件名稱（事件屬性），直接寫到元素中的 缺點：將JS程式碼過多寫入到html中，沒有實現元素行為和結構的徹底分離-->
    <button onclick="alert('hello')">標籤屬性</button>
    <!-- <button onclick="hello()">提交</button> -->
    <script>
        function hello(){
            alert("hello");
        }
    </script>

    <!-- 2.元素物件新增屬性的方式，動態新增到元素中缺點：事件方法之間相互覆蓋 -->
    <button>動態屬性</button>
    <script>
     const bth2=document.querySelector("button:nth-of-type(2)");
     bth2.onclick=function(){
     alert(1);
     };
     
      bth2.onclick=function(){
      alert(200);
     };
    //  事件的刪除
     bth2.onclick=null;
    </script>
    
    <!-- 事件監聽器 -->
 
    <button>監聽器</button>
     <button>點選廣告</button>
    <script>
        // bth3.addEventListener(事件型別，事件回撥/方法名，是否冒泡/false)
        const bth3=document.querySelector("button:nth-of-type(3)");
       
        bth3.addEventListener("click",function(){
            alert('aaa');
        });
        // bth3.addEventListener("click",function(){
        //     alert('bbb');
        // });

        // 移除瀏覽器彈窗bbb
        // 如果事件方法使用了回撥，則無法移除
        // bth3.removeEventListener("click",function(){
        //     alert("bbb");
        // });
        
        bth3.addEventListener("click",show);
        function show(){
            alert("bbb");
        }
        bth3.removeEventListener("click",show);

       
        // 事件派發
        // const myclick= new Event("click");
        // const bth4 =document.querySelector("button:nth-of-type(4)");
        // bth4.onclick=()=>alert(333); 

        // bth4.dispatchEvent(myclick);
        // let i=0;
        // bth4.addEventListener("click",()=>{
        //     console.log("點選了廣告，已經賺了：" + i +"元");
        //     i += 0.2;
        // });


        const myclick= new Event("click");
        const bth4 =document.querySelector("button:nth-of-type(4)");
        // bth4.onclick=()=>alert(333); 
        // 間歇式定時器開啟
      
        let i=0;
        bth4.addEventListener("click",()=>{
            console.log("點選了廣告，已經賺了：" + i +"元");
            i += 0.2;
        setInterval (()=>bth4.dispatchEvent(myclick),3000);
        });
    </script>
    
</body>
</html>

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            color: red;
        }
        .bgc{
            background-color:yellow;
        }
        .blue {
          color: blue;
        }
        h2{
        border:5px solid red;
        }
        
    </style>
</head>
<body>
    <h2 style = "font-size:50px;">hello world</h2>
    
</body>
<script>
    // 過時了
    // document.querySelector("h2").className="red bgc";
    const h2 = document.querySelector("h2");
    // h2.classList:動態設定元素的class
    // 1.新增紅色和背景色黃色
    h2.classList.add("red");
    h2.classList.add("bgc");
    // 2.移除背景色黃色
    h2.classList.remove("bgc");
    // 3.替換：將紅色替換成藍色
    h2.classList.replace("red","blue");

    // 新增背景色藍色
    h2.style.backgroundColor = "green";
    // 拿到這個顏色的color值，返回是blue
    console.log(h2.className);
    // 拿到這個元素hello word的高和寬
    console.log(h2.hight);
    console.log(h2.width);
    // 因為"-"是非法識別符號所以要去掉，S大寫變成駝峰式
    console.log(h2.style.fontSize);
    // 計算屬性
    // (獲取那個元素的樣式，支援偽元素)
    let styles=window.getComputedStyle(h2,null);
    console.log(styles);
    // 拿到當前元素的所有樣式，不侷限styles內聯樣式
    // 拿到高度
    console.log(styles.getPropertyValue("height"));
    console.log(styles.getPropertyValue("width"));

</script>
</html>

　　

相關文章