자바 스크립트 클릭하면 여러 요소에 이벤트 리스너 및 대상 ID를

Question

<article> 태그와 함께 모든 요소에 '클릭'의 EventListener를 설정하는 자바 스크립트 파일이 있습니다. 나는 이벤트가 발생했을 때 클릭 한 기사의 ID를 얻고 싶다. 웬일인지, 제 코드는 아무것도 생성하지 않습니다!

내 자바 스크립트 :

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

는 왜 작동하지? BTW 내 기사 설정은 윈도우가로드 될 때 호출되는 함수에 있으며, 그 함수는 다른 것들이 작동하기 때문에 확실히 작동한다는 것을 알고 있습니다. 이 루프하고 모든 문서 요소에 리스너를 추가 있도록

---

편집 그래서 난 내 코드를 고정하고, 지금은 거기에 아무것도 경고 상자를 얻을. 아이디없이 출력에 e.target을 시도 할 때, 나는 모든 요소에 대해 다음과 같은 메시지가 :

[object HTMLHeadingElement] 

어떤 제안?

---

ANOTHER 편집

나의 현재 자바 스크립트 코드 : 페이지가 난 빌어 먹을 일을 클릭하지 않았 음을 고려하지 않고,로드를 완료 할 때 내 경고 상자를 보여주고있다

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

Answer 1

기사 개체를 전달하여 매개 변수로 리디렉션하지 않습니다. 이 버그를 해결할 것입니다,

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); 
} 

희망 :

이 ( EDIT)를보십시오.

Answer 2

참조를 전달하는 대신 리디렉션 함수를 실행하고 있습니다.

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

편집 : 당신이 그들을 통해 루프 가지고 그들의 각 하나에 또는 addEventListener를 호출 할 수 있도록는 또한, getElementsByTagName은, 기사와 배열을 반환 .

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); 
} 

Answer 3

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> 

Answer 4

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); 

감사합니다.

Answer 5

아무도 클릭 된 요소를 확인하는 단일 이벤트를 언급하지 않는 이유는 무엇입니까?

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

당신이 몸 전체에 클릭 이벤트를 확인할 필요가없는 경우