多个选择的一个事件处理程序

Question

我在一个页面上有多个选择，如下所示：<select id="select-1" class="action">  <option val=1>1</option>  <option val=2>2</option></select><select id="select-2">  <option val=1>1</option>  <option val=2>2</option></select><select id="select-3" class="action">  <option val=1>1</option>  <option val=2>2</option></select>当更改类“action”的选择时，我需要使用 JS 代码执行一些操作。我可以这样做：var elements = document.getElementsByClassName("classname");for (var i = 0; i < elements.length; i++) {  elements[i].addEventListener('click', myFunction, false);}但也许有更好的方法来处理这个问题。所以我的问题是：使用一个事件处理程序来处理多个选择元素的最佳方法是什么？

Answer 1

首先：您的 html 无效：options 元素具有 value 属性，没有 val，并且该值必须有引号。

所以 <option val=1>1</option>是错误的，

而且必须是<option value="1">1</option>

对于事件委托，您需要有一个父元素。

由于您的代码是关于选择元素的，因此逻辑父级应该是一个<form>元素。

对于选择，主要事件是更改事件，而不是点击事件

最后一点，所有表单元素都必须有一个名称，这个名称在提交表单时使用，而不是 id。

在表单中使用 name 属性的另一个好处是它们可以直接用于引用表单的任何子元素

所以完整的代码是：

const myForm = document.forms['my-form']

// get any -change- event on all the form

myForm.addEventListener('change', myFunction, false) 

// event delegation function

function myFunction(evt)

  {

   // ignore other cases:

  if (!evt.target.matches('select.action')) return

  console.clear()

  console.log( 'change on :', evt.target.name )

  console.log( 'value is', myForm[evt.target.name].value )

  }

  

// disable form submit

myForm.onsubmit =evt=>evt.preventDefault()  

<form action="" name="my-form">

  <select name="select-1" class="action">

    <option value="s1_1"> s1 -1 </option>

    <option value="s1_2"> s1 -2 </option>

  </select>

  <select name="select-2">

    <option value="s2_11"> s2 -1 </option>

    <option value="s2_12"> s2 -2 </option>

  </select>

  <select name="select-3" class="action">

    <option value="s3_11"> s3 -1 </option>

    <option value="s3_12"> s3 -2 </option>

  </select>

</form>