綁定事件到多個元素，而

我想要達到的等效循環（香草JS）：綁定事件到多個元素，而

$('div').on('click', function() { 
    // Do something 
});

但是，如果沒有jQuery的。我最初的想法是使用for循環來遍歷集合中的所有元素，但我的猜測是沒有使用循環（某種本地方法？）可以更好地實現這一點。

var elems = document.getElementsByTagName('div'); 

function someEvent() { // Generic function to test against 
    alert('event fired'); 
} 

for (var i=0, j = elems.length; i < j; i += 1) { 
    elems[i].addEventListener("click", someEvent); 
}

有沒有一個更優雅的方式做到這一點，而不包括一個庫？

來源

2013-12-14 monners

我認爲它是或者將事件綁定到包含所有期望元素（例如body）的父元素並在事件中使用'target'屬性。 – JCOC611

您必須進行循環或委託，但當然您可以編寫自己的包裝函數，以便每次需要執行此操作時都不必在整個腳本中重複循環代碼。請注意，jQuery的'.on（）'方法在內部循環。 – nnnnnn

你想要的是event delegation。它通過將單個事件綁定到多個節點的父節點並分析事件的目標節點來工作。例如，您可以將onmouseup綁定到body節點，並且通過在div節點上釋放鼠標來觸發它時，body事件對象將在target屬性中包含該div。您可以分析目標以確保它符合某些標準。

更好的解釋方法是提供一個working example。

document.body.onmouseup = function (event) { 
    var target = event.target || event.toElement; 

    if (target.nodeName.toLowerCase() == "div") { 
     alert(target.childNodes[0].nodeValue); 
    }; 
};

的這個例子感興趣的主要點是target變量和條件來驗證我們的target是div。條件甚至可以是className或任何你的心臟所需。

來源

2013-12-14 05:52:02 Shea

綁定事件到多個元素，而

回答

相關問題