JavaScript Day15 - event(2) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 15

Modern Web

JavaScript 筆記 2 版系列第 15 篇

JavaScript Day15 - event(2)

13th鐵人賽 javascript

hokou

2021-09-30 23:03:36

864 瀏覽

分享至

event

查目前網頁的 event，開啟 Chrome 的開發者工具，點選 Elements，之後在 CSS 的樣式 (styles) 那欄會有一個 Event Listeners，點擊後就可看到相關的事件
多個事件
- onEvent：只會執行最後一個
- addEventListener()：都會執行
removeEventListene()：可用來移除 addEventListener() 的事件，但是第二個參數 (function) 的部分需要獨立定義，不是寫在裡面，否則無法移除

調整前

let btn = document.getElementById('btn');

btn.addEventListener('click',function(){
	console.log('事件移除失敗');
},false)

btn.removeEventListener('click',function(){
	console.log('事件移除失敗');
},false)
// 雖然內容相同，但屬於不同的 function

調整後

let btn = document.getElementById('btn');

let eventMove = function() {
	console.log('事件移除成功');
}

btn.addEventListener('click', eventMove, false);

btn.removeEventListener('click', eventMove, false);

// 屬於相同的 function

綜合練習：點擊切換內容

<body>
    <div class="block">
        <div id="b1">區塊1</div>
        <div id="b2">區塊2</div>
        <div id="text">內容</div>
    </div>
    <script>
        let block = document.querySelector(".block");
        let text = document.querySelector("#text");

        function changeText(e) {
            let name = e.target.id;
            if (name=="b1"){
                text.textContent = "block1";
            } else if (name=="b2") {
                text.textContent = "block2";
            } else {
                text.textContent = "";
            }
        }
        
        block.addEventListener("click", changeText);
    </script>
</body>