多個物件是否可共同對應一個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.