分享
三行代码  ›  专栏  ›  技术社区  ›  Strap Pedup

JavaScript-使用addEventListener代替带有选择菜单的内联“onchange”

  •  0
  • Strap Pedup  · 技术社区  · 5 天前

    我尝试使用“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>
    1 回复  |  直到 5 天前
        1
  •  1
  •   Kinglish    5 天前

    在编程侦听器中,事件作为 event ,元素为 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>