자바 스크립트에서 elem.onclick override 액션을 피하십시오.

Question

onclick의 자바 스크립트 동작에 대한 질문이 있습니다. 요소에서 onclick 함수를 초기화하는 두 개의 자바 스크립트 클래스가 있지만 동일한 HTML 요소에서 onclick 이니셜 라이저를 적용하면 마지막 onclick 함수 만 작동하지만이 동작을 이해하지 못합니다. 나는 간단한 예제에서 같은 상황을 얻으려고 테스트하고 그 결과는 같습니다. 이 이상한 동작을 내 예제 코드는 다음과 같습니다. 나는 2 경고 "하나"와 "이"을 던질 필요가 방아쇠를 클릭하지만 두 번째는 첫 번째 우선 것 같다 때

window.onload = function() 
    { 
     var testElem = document.querySelector('#test_element'); 

     test_element.onclick = function() 
     { 
      alert('one'); 
     } 

     test_element.onclick = function() 
     { 
      alert('two'); 
     } 
    } 

그리고 여기 내 HTML

<div id="test_element">click here to test_element</div> 

입니다. 제발, 누군가가 내가이 문제를 해결하도록 도울 수 있니?

미리 감사드립니다.

Answer 1

같은 이벤트에 대해 여러 핸들러를 처리 할 수있는 사용 addEventListener :

는

test_element.addEventListener('click', function(){ 
    alert('one'); 
}, false); 

test_element.addEventListener('click', function(){ 
    alert('two'); 
}, false); 

onclick 속성 (일명 인라인) 단 하나의 핸들러를 지원합니다.

Answer 2

JS에서 핸들러를 추가하는 올바른 방법 인 addEventListener(eventName, handler)을 찾고 있습니다.

이렇게하면 원하는만큼 핸들러를 추가 할 수 있습니다.