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>