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

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 formmyForm.addEventListener('change', myFunction, false)&nbsp;// event delegation functionfunction myFunction(evt)&nbsp; {&nbsp; &nbsp;// ignore other cases:&nbsp; if (!evt.target.matches('select.action')) return&nbsp; console.clear()&nbsp; console.log( 'change on :', evt.target.name )&nbsp; console.log( 'value is', myForm[evt.target.name].value )&nbsp; }&nbsp;&nbsp;// disable form submitmyForm.onsubmit =evt=>evt.preventDefault()&nbsp;&nbsp;<form action="" name="my-form">&nbsp; <select name="select-1" class="action">&nbsp; &nbsp; <option value="s1_1"> s1 -1 </option>&nbsp; &nbsp; <option value="s1_2"> s1 -2 </option>&nbsp; </select>&nbsp; <select name="select-2">&nbsp; &nbsp; <option value="s2_11"> s2 -1 </option>&nbsp; &nbsp; <option value="s2_12"> s2 -2 </option>&nbsp; </select>&nbsp; <select name="select-3" class="action">&nbsp; &nbsp; <option value="s3_11"> s3 -1 </option>&nbsp; &nbsp; <option value="s3_12"> s3 -2 </option>&nbsp; </select></form>