Использовать атрибуты тегов для добавления событий и их обработчиков к 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 +
if (object.addEventListener)
object.addEventListener(event, handler, useCapture);
else if (object.attachEvent)
object.attachEvent('on' + event, handler);
else object['on' + event] = handler;
}
addHandler(document.body, 'click', function() {
handler('Success!');
});
function handler(arg) {
alert(arg);
}
Приемущества:
1) Если вы добавите два обработчика:
document.getElementById("divId").onclick = handlerFunc2;
, то второй затрет первый. А если вы добавите через эдхэндлер:
addHandler( document.getElementById("divId"), 'click', handlerFunc );
addHandler( document.getElementById("divId"), 'click', handlerFunc2 );
, то сработаю оба.
2) Можно на лету удалять любые созданные обработчики из созданного ранее стэка.
Если вы пишите скрипт для стороннего сайта, где уже стоит обработчик window.onload =function() {}
, то добавить вторым свой обработчик, не стерев первый, можно только через описанный в статье способ.
А есть у способа el.onevent = func неочивидные противопоказания по сравнению с addHandler? Ну, например, проблема с кроссбраузерностью, или хитрости с передачей параметров?