Стандартная модель событий в языке JavaScript.
Сегодня мы рассмотрим стандартную модель событий в языке JavaScript.
Думаю, многие знают способ задания события через атрибут on + название события.
<a href="#" onclick="alert('Сработало событие!');">Нажми!</a>
Но этот способ является далеко не самым лучшим, т.к. html - это разметка и там не следует писать скриптов в атрибутах. Для того, чтобы повесить какое-нибудь событие на элемент, есть метод addEventListener(). Этот метод принимает три параметра:
- первый - название события
- второй - функция, которая должна сработать на этом событии
- третий - этап события. Если true(по-умолчанию), то событие будет срабатывать на этапе захвата, а если false - на этапе всплытия. Советую вам всегда ставить третим параметром false.
<html>
<head>
<title>addEventListener</title>
<meta charset="utf-8">
</head>
<body>
<a href="yandex.ru" id="link">Нажми!</a>
<script>
var link = document.getElementById('link');
link.addEventListener('click', function(e) {
e.preventDefault();
alert('Был произведён клик по ссылке!');
}, false);
link.addEventListener('click', function(e) {
e.preventDefault();
document.getElementsByTagName('body')[0].style.background=green;
}, false);
</script>
</body>
</html>
Как видно из примера, ещё одним плюсом данного метода является то, что мы можем повесить сразу несколько действий на одно и то же событие! В нашем примере сначала выведится alert, а затем поменяется фон body на зелёный цвет. Также заметьте, что в функцию-обработчик будет передан объект события. Назвать вы можете его как угодно, но обычно называют просто e. У него есть много всяких свойств и методов, которые вы можете посмотреть в справочнике, а в нашем примере я использовал метод preventDefault(), который отменяет стандартное поведение и, следовательно, кликая по ссылке, мы никуда не перейдём.
В конце стоит сказать, что бывают случаи, когда нужно повесить событие, а потом его где-то удалить. За удаление события отвечает метод removeEventListener(), который принимает такие же параметры, как и addEventListener().
<html>
<head>
<title>RemoveEventListener</title>
<meta charset="utf-8">
</head>
<body>
<a href="yandex.ru" id="link">Нажми!</a>
<script>
function myfunc() {
alert('Событие, которое не сработает.');
}
var link = document.getElementById('link');
link.addEventListener('click', myfunc, false);
link.removeEventListener('click', myfunc, false);
</script>
</body>
</html>
Здесь ничего не произойдёт, т.к. мы сначала повесили событие, а потом сразу его удалили.
Итак, сегодня вы узнали, как правильно задавать события в языке JavaScript. Если вы испытываете трудности в понимании статьи, то советую приобрести курс JavaScript, jQuery и Ajax с Нуля до Гуру, пройдя который вы сможете по праву называть себя Гуру JavaScript'а.
-
Создано 21.04.2014 20:39:20
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.