Использовать атрибуты тегов для добавления событий и их обработчиков к 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);
else if (object.attachEvent)
object.attachEvent('on' + event, handler);
else object['on' + event] = handler;
}
function removeHandler(object, event, handler) {
if (object.removeEventListener)
object.removeEventListener(event, handler, false);
else if (object.detachEvent)
object.detachEvent('on' + event, handler);
}
if (object.addEventListener)
object.addEventListener(event, handler, useCapture);
else if (object.attachEvent)
object.attachEvent('on' + event, handler);
else object['on' + event] = handler;
}
function removeHandler(object, event, handler) {
if (object.removeEventListener)
object.removeEventListener(event, handler, false);
else if (object.detachEvent)
object.detachEvent('on' + event, handler);
}
Для примера запишем в HTML-коде тег DIV. Затем обратимся к нему по id и добавим обработчик по клику. Затем, сработавший обработчик убьет сам себя:
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 +
