的JavaScript的onChange（）上的多個元素

是否有可能分配相同的onChange（）到多個元素（無jQuery的）的JavaScript的onChange（）上的多個元素

目前我做

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

然而，我不得不在另一個5元素上做這個onChange（），所以我想知道是否有可能一次完成所有這些元素？或者我將不得不爲每個元素執行此操作。

（我很新的JavaScript）

來源

2013-09-25 bhavicp

如果你想立即綁定它，請嘗試使用事件委託。即爲輸入創建包裝並將更改事件綁定到它，並根據事件目標檢測元素並執行操作。

事情是這樣的：

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

來源

2013-09-25 01:16:37 PSL

一個辦法做到這一點是這樣一個循環：

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-25 01:12:10 y0ruba

如何：

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

來源

2013-09-25 01:14:10 aet

顯然你可以遍歷所有的元素和分配處理程序的循環中：

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-25 01:26:25 masswerk

還有一種順序執行此操作的替代方法。您可以用僞類標記您的html代碼，並執行以下操作：

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

我想指出，此方法與舊版瀏覽器不兼容。欲瞭解更多信息，請點擊 here。

來源

2013-09-25 01:49:36 george

的JavaScript的onChange（）上的多個元素

回答

相關問題