JavaScript - 使用 addEventListener 而不是帶有選擇菜單的內聯“onchange”

Question

我正在嘗試使用“addEventListener”而不是內聯“onchange”。

我的方法有問題。 如何正確使用“addEventListener”？

https://jsfiddle.net/gdfe2ynL/1/

 <select id="feedbackCategory" onchange="logvalue(this.value)"> <option value="" selected>Choose a category</option> <option value="example1">Example 1</option> <option value="example2">Example 2</option> </select> <select id="feedbackCategory2"> <option value="" selected>Choose a category</option> <option value="example1">Example 1</option> <option value="example2">Example 2</option> </select> <script> function logvalue(value) { console.log(value) } document.getElementById("feedbackCategory2").addEventListener("change", logvalue(this.value)); </script>

Answer 1

在程序化偵聽器中，事件作為event event.target ，元素是event.target ，該元素的值是event.target.value 。 這種事情更容易將元素與一個公共屬性組合在一起，比如class ，然后通過querySelectorAll和forEach循環將偵聽器應用於每個元素

 function logvalue(event) { console.log(event.target.value + ' selected from the #' + event.target.id + ' element') } window.addEventListener('DOMContentLoaded', () => { document.querySelectorAll(".fbselect").forEach(el => el.addEventListener("change", logvalue)) })

 <select class='fbselect' id="feedbackCategory"> <option value="" selected>Choose a category</option> <option value="example1">Example 1</option> <option value="example2">Example 2</option> </select> <select class='fbselect' id="feedbackCategory2"> <option value="" selected>Choose a category</option> <option value="example1">Example 1</option> <option value="example2">Example 2</option> </select>