9

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

目前我正在做

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

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

（我对 Javascript 很陌生）

4

5 回答 5

16

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

像这样的东西：

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

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

小提琴

于 2013-09-25T01:16:37.263 回答
6

关于什么：

var names = document.getElementsByName("attribute.Identifier Source");
for (var i = 0; i < names.length; i++) {
    names[i].onchange = function() {
        //do stuff
    }
}
于 2013-09-25T01:14:10.787 回答
1

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

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);
   }
于 2013-09-25T01:12:10.963 回答
1

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

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() ...

于 2013-09-25T01:26:25.007 回答
1

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

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

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

于 2013-09-25T01:49:36.633 回答