如何將單個函數附加到多個元素？

如果我有兩個可以觸發相同功能的錨標籤（即多個關閉導航欄的按鈕），我將如何將這兩個元素與事件綁定？沒有JQUERY如何將單個函數附加到多個元素？

HTML：

<a href="#" id="ctl_one">Close Nav</a> 
<ul id="nav"> 
    <li>Nav One</li> 
    <li>Nav Two</li> 
    <li>Nav Three</li> 
</ul> 
<a href="#" id="ctl_two">Close Nav</a>

JS：

var ctlOne = document.getElementById("ctl_one"); 
var ctlTwo = document.getElementById("ctl_two"); 
var both = ctlOne || ctlTwo //<-- this is what I tried and failed. 

both.onClick = function(){ 
    toggleNav(); 
} 

function toggleNav(){ 
    // either close or open nav <UL> 
}

同樣，我知道該怎麼做，在jQuery的。我在尋找原生的javascript方法。

來源

2013-08-20 peterchon

我想你應該在你的問題中明確指出你想避免冗餘！否則，人們會產生這樣的印象，即你正在經歷一個更基本的問題。 – adarshr

下次我會記得，謝謝。 – peterchon

var ctlOne = document.getElementById("ctl_one"); 
var ctlTwo = document.getElementById("ctl_two"); 

ctlOne.onClick = ctlTwo.onclick = toggleNav;

來源

2013-08-20 19:27:38 Paulpro

所以，沒辦法做&&或|| ？ – peterchon

@peterchon在一句話：沒有。 –

@peterchon不，但是馬特·鮑爾建議的循環會很好，如果你最終創建了更多的鏈接，你想調用toggleNav onclick。 – Paulpro

你不能這樣做在同一行，但我看不出有什麼阻止你這樣做：

ctlOne.onClick = toggleNav; 
ctlTwo.onClick = toggleNav;

，或者更幹：

var both = [ctlOne, ctlTwo]; 
for (var i=0; i<both.length; i++) { 
    both[i].onClick = toggleNav; 
}

來源

2013-08-20 19:27:42

我選擇了Paulpro的答案，僅僅是因爲我正在專門尋找非循環方法。 – peterchon

-2

REAL ONE eventHandler on multiple items

當我創建列表或網格需要s ame函數我只使用一個事件處理程序並在處理程序內部決定要執行什麼操作。

擴展一個事件處理程序意味着如果您卸載代碼，您只需刪除一個處理程序，但也使用更少的資源並更新代碼更簡單。

在你的情況下，我不得不包括一個長函數（切片調用...）來獲得點擊li 的索引，並檢查是否應該執行toggleNav函數。

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<script> 
(function(W){ 
var D; 
function init(){ 
D=W.document; 
D.getElementById('ul').addEventListener('click',h,false); 
} 
function h(e){ 
var a=e.target,i=Array.prototype.slice.call(a.parentNode.childNodes).indexOf(a); 
if(a.parentNode.id=='ul'){ 
    console.log('text: ',a.textContent,' index: ',i,' execute toggleNav: ',i<2); 
} 
} 
W.addEventListener('load',init,false) 
})(window) 
</script> 
</head> 
<body> 
<ul id="ul"><li>a</li><li>b</li><li>c</li></ul> 
</body> 
</html>

正如你所看到的代碼是短暫的，沒有循環。但最重要的是你只有一個處理程序！

這自然適用於現代的瀏覽器僅但也有一些變化它在所有的瀏覽器一樣，我認爲像e=e||window.event; e.target=e.target||e.srcElement ..

編輯

簡單的例子，與長變量名和空格隨處可見按照matt的要求，但是使用上面的例子吧緩存各種元素，它與外部庫兼容，即使你擴展它。

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<script> 
function inizializzation() { // Here i inizialize the eventhandler 
var TheULElement=window.document.getElementById('ul'); // search 
// for the element which id is ul 
TheULElement.addEventListener ('click' , clickhandler , false) 
// here i add an event handler to the element which id is ul 
} 
function clickhandler (clickevent) { // that handler i previously added 
if (clickevent.target.parentNode.id == 'ul') { // here i check if the 
    // parent node id of the element i clicked is ul 
    console.log(clickevent.target.textContent); 
    // this writes to the console 
    //-> rigthclick 'inspect element' (in chrome) 
} 
} 
window.addEventListener ('load' , inizializzation , false) 
// this is the event handler when the page loads 
// which starts the first function called inizializzation 
</script> 
</head> 
<body> 
<ul id="ul"> 
<li>a</li> 
<li>b</li> 
<li>c</li> 
<li>d</li> 
<li>e</li> 
<li>f</li> 
<li>g</li> 
<li>h</li> 
<li>i</li> 
</ul> 
</body> 
</html>

這個答案的要點是不只是爲了處理2個元素，但多元素

和reflets的titleof問題

如何附上一個單一功能到多元件？

或者還包含多個包含多個元素的元素。

在你需要考慮像大格這種情況下

行是這裏面裏的我可以添加按鈕跨越或什麼，並再次只與單一事件處理控制他們所有的李時珍

。

根據行/列號或任何您imggination必須提供。

cols/rows您的處理程序位於parentNode的prantNode上。

if (clickevent.target.parentNode.parentNode.id == 'ul') { 
console.log(clickevent.target.textContent); 
}

，行/ colums將

<ul> // whatever (div span) it just has to be a element 
<li> // whatever ,best if display:block/flex on all thiselements but 
    <whatever></whatever> // but with WHITESPACES this does not work 
    <whatever></whatever> // so it's better you add them with a script 
    <whatever></whatever> // or learn to write without WHITESPACES 
    <whatever></whatever> // or new lines. 
    <whatever></whatever> // because a textnode/newline/whitespace 
</li> // in dom is a ELEMENT 
<li> 
    <whatever></whatever> 
    <whatever></whatever> 
    <whatever></whatever> 
    <whatever></whatever> 
    <whatever></whatever> 
</li> 
</ul>

是否有回線？沒有。

ps .:我回答了這個問題，因爲它已經是綠旗，所以我只是試圖幫助，但我的語言不是英語，所以請隨時糾正我的文字。但請不要觸摸我的代碼。

來源

2013-08-20 20:20:30 cocco

這是令人難以置信的代碼。是短變量名稱和缺乏空白空間應該使其加載或運行速度更快？ –

沒有隻有一個EVENTHANDLER，所以1000比你可以有一個事件處理程序VS添加每個鏈接一個函數引用創建更多的內存問題，一個處理程序......但顯然你不能讀代碼。 – cocco

現在好點馬特？ – cocco

如何將單個函數附加到多個元素？

回答

相關問題