Обработчики событий - добавляем/удаляем
31 января 2008, 13:29
Автор: Александр Бурцев [bur]
Использовать атрибуты тегов для добавления событий и их обработчиков к HTML-элементам - способ древний и неудобный. Смотрим более красивое решение.
На написание этой статьи меня натолкнул данный труд, откуда функции и были взяты, правда с небольшими переделками.
Как многие начинающие разработчики добавляют обработчик событий к HTML-элементу? Способ почти также стар, как сам HTML:
или, в случае существования функции-обработчика с именем clickHandler:
Однако, есть более удобный способ! Можно, не изменяя HTML-код (что не мало важно), добавлять или убивать (что в вышеперечисленных способах не удобно) обработчики событий. Смотрим функции:
Для примера запишем в HTML-коде тег DIV. Затем обратимся к нему по id и добавим обработчик по клику. Затем, сработавший обработчик убьет сам себя:
Успешно работает в:
- IE6
- NN 7.1+
- FF 1.5
- Mozilla 1.0.7+
- Opera 7.1 +
// Все права на статью JavaScript::Обработчики событий - добавляем/удаляем принадлежат сайту 2007.fastcoder.ru
На написание этой статьи меня натолкнул данный труд, откуда функции и были взяты, правда с небольшими переделками.
Как многие начинающие разработчики добавляют обработчик событий к HTML-элементу? Способ почти также стар, как сам HTML:
<body onclick="alert('Вы кликнули по телу документа');"></body>
или, в случае существования функции-обработчика с именем clickHandler:
<body onclick="clickHandler();"></body>
Однако, есть более удобный способ! Можно, не изменяя HTML-код (что не мало важно), добавлять или убивать (что в вышеперечисленных способах не удобно) обработчики событий. Смотрим функции:
function addHandler(object, event, handler, useCapture) {
if (object.addEventListener) {
object.addEventListener(event, handler, useCapture ? useCapture : false);
} else if (object.attachEvent) {
object.attachEvent('on' + event, handler);
} else alert("Add handler is not supported");
}
function removeHandler(object, event, handler) {
if (object.removeEventListener) {
object.removeEventListener(event, handler, false);
} else if (object.detachEvent) {
object.detachEvent('on' + event, handler);
} else alert("Remove handler is not supported");
}
if (object.addEventListener) {
object.addEventListener(event, handler, useCapture ? useCapture : false);
} else if (object.attachEvent) {
object.attachEvent('on' + event, handler);
} else alert("Add handler is not supported");
}
function removeHandler(object, event, handler) {
if (object.removeEventListener) {
object.removeEventListener(event, handler, false);
} else if (object.detachEvent) {
object.detachEvent('on' + event, handler);
} else alert("Remove handler is not supported");
}
Для примера запишем в HTML-коде тег DIV. Затем обратимся к нему по id и добавим обработчик по клику. Затем, сработавший обработчик убьет сам себя:
<div id="divId">Click here!</div>
var div = document.getElementById("divId");
function divFunc() {
alert("One time!");
removeHandler(div, "click", divFunc);
}
addHandler(div, "click", divFunc);
function divFunc() {
alert("One time!");
removeHandler(div, "click", divFunc);
}
addHandler(div, "click", divFunc);
Успешно работает в:
- IE6
- NN 7.1+
- FF 1.5
- Mozilla 1.0.7+
- Opera 7.1 +
// Все права на статью JavaScript::Обработчики событий - добавляем/удаляем принадлежат сайту 2007.fastcoder.ru