Javascript單擊多個元素的事件監聽器，並獲取目標ID

我有一個JavaScript文件，設置一個EventListener'點擊'每個元素與<article>標記。我希望獲得事件發生時點擊的文章的ID。出於某種原因，我的代碼什麼都不產生！Javascript單擊多個元素的事件監聽器，並獲取目標ID

我的javascript：

articles = document.getElementsByTagName('article'); 
articles.addEventListener('click',redirect(e),false); 
function redirect(e){ 
alert(e.target.id); 
}

爲什麼不是這方面的工作？順便說一句，我的文章設置是在窗口加載時調用的一個函數，我知道這是可以肯定的，因爲該函數還有其他工具可用。

編輯

所以我修好了我的代碼，所以它將循環和監聽器添加到每一篇文章元素，現在我得到什麼也沒有一個警告框。當試圖輸出不帶ID的e.target時，我會收到以下每個元素的消息：

[object HTMLHeadingElement]

有什麼建議嗎？

ANOTHER編輯

我當前的JavaScript代碼：

function doFirst(){ 
articles = document.getElementsByTagName('article'); 
for (var i = 0; i < articles.length; i++) { 
    articles[i].addEventListener('click',redirect(articles[i]),false); 
} 
} 

function redirect(e){ 
alert(e.id); 
} 
window.addEventListener('load',doFirst,false);

這顯示了當頁面加載完成，沒有考慮到我還沒有點擊一個該死的東西我的警告框：O

來源

2012-12-15 arielschon12

您沒有傳遞文章對象作爲參數重定向。

試試這個（編輯）：

articles = document.getElementsByTagName('article'); 
for (var i = 0; i < articles.length; i++) { 
    articles[i].addEventListener('click',redirect,false); 
} 
function redirect(ev){ 
    alert(ev.target.id); 
}

希望，它將解決的bug。

來源

2012-12-15 16:35:43

這是顯示的ID，但之前，我甚至點擊該項目！我該如何解決這個問題？ – arielschon12

@ arielschon12：我沒有得到它你想說什麼？你是否說它顯示警報，即使沒有點擊元素。這是不可能的。 –

這正是發生的情況。在頁面加載的那一刻，我得到了彈出元素ID的警告框。 – arielschon12

您正在執行重定向功能而不是傳遞引用，請嘗試以下操作：

articles = document.getElementsByTagName('article'); 
articles.addEventListener('click',redirect,false); 
function redirect(e){ 
    alert(e.target.id); 
}

編輯： 此外，返回的getElementsByTagName與文章的數組，所以你必須通過他們循環，並調用addEventListener對他們中的每一個。

articles = document.getElementsByTagName('article'); 
for (var i = 0; i < articles.length; i++) { 
    articles[i].addEventListener('click',redirect,false); 
} 
function redirect(e){ 
    alert(e.target.id); 
}

來源

2012-12-15 14:41:59 sroes

是不是工作以及其他建議？ – arielschon12

是的，我錯過了你使用getElementsByTagName的事實。查看我的編輯 – sroes

仍然無法正常工作，我收到一個警告框但沒有ID。它簡直是空的。 – arielschon12

getElementsByTagName返回一個節點列表。然後，您可以使用for循環爲每個元素添加一個eventlistener。

<div id="test"> 
hey 
</div> 
<div id="test2"> 
yo 
</div> 

<script> 
var nl = document.getElementsByTagName('div'); 

for(var i=0; i<nl.length; i++){ 
    nl[i].addEventListener('click', function(e){ 
     alert(e.target.id); 
    },false); 
} 
</script>

來源

2012-12-15 14:51:39 gkiely

這幫了很大忙，現在我可以看到一個警告框。問題是，警報框是空的。它沒有ID，當我知道我的元素有ID時。這是爲什麼？ – arielschon12

你的html是什麼樣的。 – gkiely

我只是散佈了一堆文章，這不是重要的一部分。 – arielschon12

-1

articles.addEventListener('click',redirect,false); // omit redirect(e) inside event listener // and then try with the alert as you did.

如果不工作，然後通過e.id而不是e.target.id嘗試內部警告如下：

alert(this.id);

感謝。

來源

2012-12-15 14:59:05

當使用e.id我得到一條消息，說「未定義」 – arielschon12

你有任何其他的建議嗎？ – arielschon12

然後用this.id代替e.id測試，謝謝。 –

爲什麼沒有人提到檢查點擊元素的單個事件？

document.body.addEventListener('click', function(e) { 
    var target = e.target; 
    if (target.nodeName === 'article') { 
     // do whatever you like ;-) 
    } 
    e.stopPropagation() 
});

它更高性能的具有較小的事件..

，如果你不需要檢查點擊事件的整個身體，你可以在事件附加到一些更接近父元素

來源

2016-03-06 07:52:56 Can

Javascript單擊多個元素的事件監聽器，並獲取目標ID

回答

相關問題