HTML 요소 컬렉션에 이벤트 수신기 추가

Question

개체가 이벤트 수신기에 바인딩되기 위해서는 getElementsByTagName 및 getElementsByClassName에 인덱스 식별자가 필요하다는 것을 알고 있습니다.

그래서 문제는 가 어떻게 getElementsByTagName 또는 getElementsByClassName 를 사용하여 발견 HTML 요소의 컬렉션에 이벤트 리스너를 추가하는 방법은 무엇입니까?

<input class="inputs" type="submit" value="Hello" /> 
<input class="inputs" type="submit" value="World" /> 

var inputElem = document.getElementsByTagName('input'); 
inputElem.addEventListener('click', function(){ 
    alert(this.value); 
}, false); 

나는 jQuery를에서이 작업을 수행하는 방법을 알고,하지만 난 순수 JS와 함께 작업을 수행하는 방법을 알고 싶어요.

Answer 1

각각에 eventlistener를 추가하는 것은 좋지 않습니다. 이 도움이 될 수있다

http://jsfiddle.net/b8gotLL6/

document.getElementById('parent').addEventListener('click', function(e){ 
alert(e.target.value); 
}) 

을 그리고 당신은 단지 getElementsByClassNamegetElementsByTagName 또는 를 사용하여 수행하려는 경우, 다음 난 당신이 배열이 반환을 위해 반복해야 할 것 같아요.

Answer 2

시도 querySelectorAll 방법.

var inputElem = document.querySelectorAll('input'); 

배열을 반환하고 배열을 반복하여 이벤트 리스너를 추가 할 수 있습니다.

Answer 3

클래스를 선택기로 사용할 수도 있습니다.

var elems = document.getElementsByClassName('inputs'); 

다음으로 루프하여 이벤트 처리기를 연결하십시오.

Answer 4

var i=0, inputElem = document.getElementsByTagName('input'), len = inputElem.length;  
while(i < len){ 
    inputElem[i].addEventListener('click', function(){ 
     alert(this.value); 
    }, false); 
i++; 
} 

Answer 5

대리인을 사용하여 구현할 수 있습니다. 이 입력에 대한 부모 요소를 확보하고 해당 부모 요소에 이벤트 수신기를 추가합니다. 이렇게하면 하나의 이벤트를 첨부하고 이벤트 버블 링을 사용하여 작업을 완료 할 수 있습니다. 해당 이벤트 리스너에서 이벤트의 대상을 확인해야 할 수 있으며 해당 대상이 입력 요소와 동일한 경우이 조건에서 논리를 실행할 수 있습니다.

이벤트 처리기 기능에서 이와 같은 작업을 수행 할 수 있습니다.

// ... 
// get event and source element e = e || window.event; 
src = e.target || e.srcElement; 
if (src.nodeName.toLowerCase() !== "input") { 
    return; 
} 
// ... 

Answer 6

@Rutwick Gangurde가 말한 것처럼 꽤 간단합니다. 일단 요소를 얻으면 루프를 통해 이벤트를 첨부하면됩니다.

var inputElem = document.getElementsByTagName('input'); 

for(var i = 0; i < inputElem.length; i++) { 

    inputElem[i].addEventListener('click', function(){ 
     alert(this.value); 
    }, false); 
} 

는 여기가 바이올린에 : http://jsfiddle.net/wm7p0a77/

Answer 7

이 같은 시도 할 수 있습니다 : 먼저 특정 유형의 그것을 통해 루프의 모든 요소를 ​​얻을.

Answer 8

먼저

var elems = document.getElementsByClassName('inputs'); 
 
for(var i = 0; i < elems.length; i++) { 
 

 
    elems[i].addEventListener('click', function(){ 
 
     alert(this.value); 
 
    }, false); 
 
}

<input class="inputs" type="submit" value="Hello" /> 
 
<input class="inputs" type="submit" value="World" />

대신 getElementsByTagName의, getElementsByClassName를 사용합니다.이 같은 이벤트 리스너를 추가 그들을 통해 다음 루프,이 완벽 jsfiddle