JavaScript Day15 - event(2)

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>