버튼을 클릭 할 때 함수를 실행하는 방법은 무엇입니까?

Question

jQuery를 사용하지 않고 JavaScript에서 버튼을 클릭했을 때 함수를 실행하는 가장 좋은 방법은 무엇입니까?

I는 다음과 같습니다 솔루션을 찾고 있어요 :

var button = document.getElementById('myButton'); 

function sayHello() { 
    alert('hello'); 
} 

button.attachFunctionToClick(sayHello); 

Answer 1

이벤트를 부착의 표준 방법은 다음과 같이이다 : 즉의

var button = document.getElementById("myButton"); 
button.addEventListener("click", sayHello, false); 

Read more

이전 버전 (9보다 작 으면) addeventlistener를 지원하지 않으므로 attachEvent 함수로 돌아 가야합니다. 물론

button.attachEvent('click',sayHello); 

당신은 여전히이 같은 요소의 onclick 방법에 추가 할 수 있습니다

button.onclick = sayHello 

위의 3 예는 콜백 함수, 수단에 어떤 매개 변수를 전달하지 않는 가정 그들이받는 유일한 인수는 이벤트 객체입니다.

Answer 2

var button = document.getElementById('myButton'); 
function sayHello() { 
    alert('hello'); 
} 

if(document.addEventListener) 
    button.addEventListener('click',sayHello,false); 
else 
    button.attachEvent('click',sayHello); 

Answer 3

<script> 
    function test() { 
     alert('aaa'); 
    } 
</script> 

<input type="button" onclick="test()" /> 

또는

이 가까운 body 태그 전에 페이지의 마지막에 배치됩니다

<input type="button" id="myButton" /> 

:

브라우저 규정에

<script> 
    function test() { 
     alert('aaa'); 
    } 
    var button = document.getElementById('myButton'); 
    button.onclick = test; 
</script> 

Answer 4

가 여기에 간단한 도우미 함수입니다 :

function setEvent (element, event, handler) { 
    if(document.addEventListener){ 
    element.addEventListener(event, handler); 
    }else{ 
     element.attachEvent("on" + event, handler, false); 
    } 
}; 

중요 : 여기서 "on" + event을 확인하십시오. IE의 이벤트에 사용됩니다. 더 많은 것을 here를보십시오.

EXAMPLE

또는 당신이 시도 할 수 있습니다 :

button.onclick = sayHello; 

는 DOM 0의 본질적 부분 이었기 때문에,이 방법은 매우 널리 지원하고 특별한 크로스 브라우저 코드를 필요로하지 않는다; 따라서 추가 addEventListener() 기능이 필요하지 않으면 일반적으로 이 동적으로 이벤트 리스너를 등록하는 데 사용됩니다.

EXAMPLE

attachEvent

- IE < 9에 사용 : 함수가 가 불려 가도록 (듯이)

이 이벤트에 지정된 함수를 바인드 할 때마다 객체에 이벤트가 발생합니다.

addEventListener

:

하여 addEventListener()은 단일 대상 하나의 이벤트 리스너를 등록한다. 이벤트 대상은 문서의 단일 요소, ​​문서 , 창 또는 XMLHttpRequest 일 수 있습니다.

대상에 대해 둘 이상의 이벤트 수신기를 등록하려면 동일한 대상이지만 이벤트 유형이 다른 이벤트 수신기 또는 캡처 매개 변수에 대해 addEventListener()를 호출하십시오.