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

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);
}

但也许有更好的方法来处理这件事。

因此，我的问题是:使用一个事件处理程序处理多个select元素的最佳方法是什么？

Answer 1

首先: html是无效的: options元素具有value属性，没有val，而且这个值必须有引号。

所以<option val=1>1</option>错了，

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

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

因为您的代码是关于select元素的，所以逻辑父元素应该是一个<form>元素。

对于选择，主事件是更改事件，而不是单击事件。

最后，所有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>

​

Answer 2

另一种方法是使用，在所有这些选择所在的祖先元素上挂载click，并利用click气泡这一事实。

document.querySelector("selector-for-the-container").addEventListener("click", function(event) {
    const select = event.target.closest(".action");
    if (select && this.contains(select)) {
        event.currentTarget = select;
        return myFunction.call(select, event);
    }
});

currentTarget的更新和将this设置为select的this调用使事件看起来像是直接附加到select。但是，您不需要这样做，或者您可以只做一个，但不能做另一个，这取决于您希望myFunction做什么。

见MDN：

• Element#closest
• Node#contains