多个元素上的 JavaScript onChange()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18994587/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript onChange() on multiple elements
提问by bhavicp
Is it possible to assign the same onChange() to multiple elements (no jQuery)
是否可以将相同的 onChange() 分配给多个元素（没有 jQuery）
At the moment i'm doing
目前我正在做
var namefirst = document.getElementsByName("attribute.Identifier Source")[0];
namefirst.onchange = function () {//disable some stuff }
However, I have to do this onChange() for another 5 elements, and so i was wondering if it's possible to do this for all of them at once? Or am I going to have to do this for each element.
但是，我必须对另外 5 个元素执行 onChange() 操作，所以我想知道是否可以同时对所有元素执行此操作？还是我必须为每个元素都这样做。
(I'm very new to Javascript)
（我对 Javascript 很陌生）
回答by PSL
If you want to bind it at once, try using event delegation. i.e create a wrapper for the inputs and bind the change event to it, and detect the element based on event target and do your action.
如果您想一次绑定它，请尝试使用事件委托。即为输入创建一个包装器并将更改事件绑定到它，并根据事件目标检测元素并执行您的操作。
Something like this:
像这样的东西：
HTML:
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:
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);
}
});
So here the change event on input bubbles up to its parent and there you catch it and perform your operations.
因此，这里输入的更改事件向上冒泡到其父级，然后您可以捕获它并执行操作。
回答by aet
What about:
关于什么：
var names = document.getElementsByName("attribute.Identifier Source");
for (var i = 0; i < names.length; i++) {
names[i].onchange = function() {
//do stuff
}
}
回答by y0ruba
A way to do it is with a loop like this:
一种方法是使用这样的循环：
for(i=0; i<var.length; i++){
//do stuff
}
but I don't understand your code so I can't be specific
但我不明白你的代码所以我不能具体
if you want all elements with a name to have an onchange event then this is how you do it:
如果您希望所有具有名称的元素都具有 onchange 事件，那么您可以这样做：
get=document.getElementsByName("someName");
for(i=0; i<get.length; i++){
get[i].addEventListener("change", yourFunction, false);
}
回答by masswerk
Obviously you could loop over the elements and assign the handler inside the loop:
显然，您可以遍历元素并在循环内分配处理程序：
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;
Or, if you would want to have a reference to the changed element:
或者，如果您想引用已更改的元素：
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);
}
*/
}
Please note that document.getElementsByName() is only supported with XHTML, you may want to use document.querySelectorAll() or document.getElementsByTagName() ...
请注意 document.getElementsByName() 仅支持 XHTML，您可能需要使用 document.querySelectorAll() 或 document.getElementsByTagName() ...
回答by george
There is an alternate way in doing this sequentially. You can mark your html code with a pseudo-class and do the following:
有一种替代方法可以按顺序执行此操作。您可以使用伪类标记您的 html 代码并执行以下操作：
var elems=document.querySelectorAll(".mark");
for(var i=0;i<elems.length;i++){
elems[i].addEventListener("change", myFunction);
}
I would like to note that this method is not compatible with older browsers. For more info go here.
我要注意的是，此方法与旧浏览器不兼容。欲了解更多信息，请访问 此处。
