多个元素上的 JavaScript onChange()答案

【问题标题】：JavaScript onChange() on multiple elements多个元素上的 JavaScript onChange()
【发布时间】：2013-09-25 01:07:27
【问题描述】：

是否可以将相同的 onChange() 分配给多个元素（没有 jQuery）

目前正在做

var namefirst = document.getElementsByName("attribute.Identifier Source")[0];
namefirst.onchange = function () {//disable some stuff }

但是，我必须对另外 5 个元素执行 onChange()，所以我想知道是否可以一次为所有元素执行此操作？还是我必须为每个元素都这样做。

（我对 Javascript 很陌生）

【问题讨论】：

标签： javascript onchange

【解决方案1】：

如果您想立即绑定它，请尝试使用事件委托。即为输入创建一个包装器并将更改事件绑定到它，并根据事件目标检测元素并执行您的操作。

类似这样的：

HTML：

<div id="wrapper">
    <input type="text" name="myText" />
    <input type="text" name="myText" />
    <input type="text" name="myText" />
    <input type="text" name="myText" />
</div>

JS：

document.getElementById('wrapper').addEventListener('change', function(event){
    var elem = event.target;
    console.log(elem.name);
    console.log(elem.tagName);
    console.log(elem.type);
    if(elem.name === "myText"){
         console.log(elem.value);
    }   
});

因此，输入上的 change 事件会冒泡到其父级，然后您可以捕获它并执行您的操作。

Fiddle

【讨论】：

【解决方案2】：

怎么样：

var names = document.getElementsByName("attribute.Identifier Source");
for (var i = 0; i < names.length; i++) {
    names[i].onchange = function() {
        //do stuff
    }
}

【讨论】：

【解决方案3】：

显然你可以遍历元素并在循环内分配处理程序：

function onChangeHandler() {
  // do some stuff
}

var myCollection = document.getElementsByName("attribute.Identifier Source");
for (var i=0, l=myCollection.length; i<l; i++)
  myCollection[i] = onChangeHandler;

或者，如果您想引用更改后的元素：

function onChangeHandler(event) {
  // some browser abstraction
  if (!event) event = window.event;
  var changedElement = event.srcElement || this;
  // do some stuff
}

var myCollection = document.getElementsByName("attribute.Identifier Source");
for (var i=0, l=myCollection.length; i<l; i++) {
  myCollection[i].addEventListener('change', onChangeHandler, false);
  /* if you want to support older MSIE, you would do some like
  var el = myCollection[i];
  if (el.addEventListener) {
    el.addEventListener('change', onChangeHandler, false);
  }
  else if (el.attachEvent) {
    el.attachEvent('onchange', onChangeHandler);
  }
  */
}

请注意 document.getElementsByName() 仅支持 XHTML，您可能需要使用 document.querySelectorAll() 或 document.getElementsByTagName() ...

【讨论】：

【解决方案4】：

一种方法是使用这样的循环：

for(i=0; i<var.length; i++){
    //do stuff
}

但我不明白你的代码，所以我不能具体

如果您希望所有具有名称的元素都具有 onchange 事件，那么您可以这样做：

get=document.getElementsByName("someName");
for(i=0; i<get.length; i++){
       get[i].addEventListener("change", yourFunction, false);
   }

【讨论】：

【解决方案5】：

按顺序执行此操作还有另一种方法。您可以使用伪类标记您的 html 代码并执行以下操作：

var elems=document.querySelectorAll(".mark");
for(var i=0;i<elems.length;i++){
    elems[i].addEventListener("change", myFunction);
}

我想指出，此方法与旧版浏览器不兼容。欲了解更多信息，请访问 here.

【讨论】：