多個物件是否可共同對應一個addEventListener監聽事件?

一個物件可以綁定多個監聽事件,如:
element物件綁定了doSomething及doSomethingElse。
$('#element')
.on('click', doSomething)
.on('click', doSomethingElse);
我想請問有沒有可能在addEventListener事件中,
element1、element2、element3等多個物件,擁有共同的addEventListener監聽事件?

例如這個即時顯示的例子:
js
function realtime(){ 
var element1 = $(\"#input1\")[0];
element1.addEventListener(\"input\", (function webChange(){
if(element1.value){
$(\"#test1\").html(element1.value);
};
}), false);
var element2 = $(\"#input2\")[0];
element2.addEventListener(\"input\", (function webChange(){
if(element2.value){
$(\"#test2\").html(element2.value);
};
}), false);
}
html
<input type=\"text\" name=\"text\" id=\"input1\" class=\"input123\"/> 
<div>輸入的值為:<span id=\"test1\" class=\"test123\">還未輸入</span></div>
<br><br><br>
<input type=\"text\" name=\"text\" id=\"input2\" class=\"input123\"/>
<div>輸入的值為:<span id=\"test2\" class=\"test123\">還未輸入</span></div>
<script type=\"text/javascript\">realtime();</script>
當input1輸入時,test1就會即時顯示輸入的文字,
同樣的,input2輸入,test2顯示。
可以發現這兩個監聽事件其實是一樣的,
只是監聽的目標及要顯示的目標不同。

少量的需求下可以將JS複製貼上改數值,
不過當需求大增時(幾十個輸入框)或動態的產生輸入框,
複製貼上這方法就顯得相當不合效益,
所以在查到一個物件可以有多個事件時,
我在想是不是有辦法能夠反過來的,
多個物件有著共同的事件,(但又作用在不同區域)?

我有試過for回圈,並使用class為目標,
不過卻完全沒有動靜:
var elements = document.getElementsByClassName('input123');
var divs = document.getElementsByClassName('test123');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('input', (function(i) {
return function() {
divs[i].innerHTML = elements[i].value;
};
})(i), false);
}​

謝謝!
標籤:

評論

  • edited 五月 2015
    雖然是 2014年10月的 問題了= ="
    我還是點一下吧!!

    隱函式呼叫不到 你在 某function 內才生成的變數
    例如 你寫的這個部分

    除非 divs 是全域變數,不是的話當隱涵式執行的時候,會找不到 divs
    elements[i].addEventListener('input', (function(i) {
    return function() {
    divs[i].innerHTML = elements[i].value;
    };
    })(i), false);

    這是個人的見解
Sign In or Register to comment.