Как правильно сделать что-то вроде следующего без использования jQuery.
$(document).ready(function(){
$("#someButton").click(function(){
alert("Hello");
});
});
Спасибо.
Регистрация событий JavaScript без использования jQuery
Ответ 1
Самый простой способ:
// DOM Level 0 way
window.onload = function () {
document.getElementById("someButton").onclick = function() {
alert("Hello");
};
};
Это будет работать на всех браузерах, но обратите внимание, что при таком подходе к событию может быть присоединен только один обработчик событий.
Также обратите внимание, что событие onload не полностью эквивалентно событию jQuery ready, onload будет запущено, когда все ресурсы страницы будут полностью загружены (изображения, подкадры и т.д.).), а ready срабатывает, как только DOM анализируется.
Если вы хотите подключить несколько обработчиков событий, вы можете использовать DOM Level 2 element.addEventListerner (или element.attachEvent для IE)
Простейшей абстракцией для получения кросс-браузерного способа привязки событий является:
function addEvent(el, eventType, handler) {
if (el.addEventListener) { // DOM Level 2 browsers
el.addEventListener(eventType, handler, false);
} else if (el.attachEvent) { // IE <= 8
el.attachEvent('on' + eventType, handler);
} else { // ancient browsers
el['on' + eventType] = handler;
}
}
Затем вы можете:
var button = document.getElementById("someButton");
addEvent(button, 'click', function () {
alert("Hello");
});
addEvent(button, 'click', function () {
alert("world!");
});
Помните также, что методы addEventListener и IE attachEvent имеют свои отличия, когда вы прикрепляете несколько обработчиков к событию с помощью addEventListener, они будут запущены в том же порядке, что и обработчики (FIFO), attachEvent вызовет обработчики в противоположном порядке (LIFO).
Посмотрите пример здесь.
Ответ 2
TL; DR
В современном браузере:
<input type="button" id="someButton" value="Some Button">
<script>
document.getElementById("someButton").addEventListener("click", function() {
alert("Hello");
}, false);
</script>
Обратите внимание, что script находится после кнопки в HTML. Почему это имеет значение? Продолжайте читать.
document.getElementById("someButton").addEventListener("click", function() {
snippet.log("Hello");
}, false);<input type="button" id="someButton" value="Some Button">
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>Ответ 3
Как насчет чего-то подобного?
document.getElementById('someButton').onclick = function () { alert('Hello');}
Ответ 4
попробуйте следующее:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test clicks</title>
<script type="text/javascript">
function setClicks() {
var element = document.getElementById('test');
element.onclick = function() {
alert('test');
}
}
</script>
</head>
<body onload="setClicks();">
<div id="test" name="test">
test
</div>
</body>
</html>Ответ 5
Этот ответ не так прост без jQuery, потому что есть два основных стиля (в зависимости от того, какой браузер вы используете) для подключения событий. Если вы не используете один из этих двух стилей, ваши события могут перезаписывать друг друга. Здесь более простой стиль/переписывание:
window.onload = function() {
document.getElementById("someButton").onclick = function() {
alert("Hello");
}
}
Но если вы попытаетесь сделать это дважды, вы получите только одно предупреждение, потому что второй раз перезапишет первый. В качестве альтернативы вы можете выполнить обнаружение браузера/функции, а затем использовать специальные механизмы событий для определенных браузеров; для получения дополнительной информации об этом стиле проверьте QuirksMode.com:
Ответ 6
Насколько я знаю, onLoad не такой, как On DOM Ready.
В режиме загрузки ожидает загрузки всех ресурсов (изображений, других внешних файлов). тогда как On DOM Ready ожидает только, что HTML будет отображаться и не дожидается загрузки ресурсов.
Исправьте меня, если я ошибаюсь.