Question

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

目前我正在做

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

但是，我必须在另外5个元素的onChange（）上执行此操作，所以我想知道是否可以立即为所有这些元素执行此操作？或者我将不得不为每个元素执行此操作。

（我对Javascript很新）

Answer 1

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

这样的事情：

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

所以这里输入的更改事件会在其父项上冒泡，然后您可以捕获它并执行操作。

<强> Fiddle

Answer 2

怎么样：

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

Answer 3

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

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

Answer 4

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

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（）......

Answer 5

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

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

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

关于多个元素的JavaScript onChange（）

5 个答案: