Как выполнить функцию при нажатии кнопки?

Question

Какова наилучшая практика для выполнения функции при нажатии кнопки на JavaScript без использования jQuery?

Я ищу решение, которое выглядит следующим образом:

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()" /> 

или

<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() для одной и той же цели, но с разными типами событий, прослушиватели событий или параметры захвата.