webew
Войти » Регистрация
 
JavaScript :: События

Обработчики событий - добавляем/удаляем

31 января 2008, 13:29
Использовать атрибуты тегов для добавления событий и их обработчиков к HTML-элементам - способ древний и неудобный. Смотрим более красивое решение.

На написание этой статьи меня натолкнул данный труд, откуда функции и были взяты, правда с небольшими переделками.

Как многие начинающие разработчики добавляют обработчик событий к 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");
}

Для примера запишем в 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);

Успешно работает в:
- IE6
- NN 7.1+
- FF 1.5
- Mozilla 1.0.7+
- Opera 7.1 +


// Все права на статью JavaScript::Обработчики событий - добавляем/удаляем принадлежат сайту 2007.fastcoder.ru
Добавить комментарий

1234ru

Т.е., как я понял, суть метода заключается в том, что некий JavaScript изменяет содержимое определенного тега, который ищет по его (тега) id.

А как быть в случае, если хочется изменить содержимое не какого-то одного тега, а, например, всех тегов <a> (например, вписать в каждый тег onclick())?
То, что не убивает нас, делает нас инвалидами.
29.10.2008, 20:43
Ответить
NO USERPIC

rgbeast

Можно использовать функцию getElementsByTagName(), а затем в цикле присваивать обработчик события. Кроме того, можно присваивать обработчик только ссылкам определенного вида (например, только внешним ссылкам).
30.10.2008, 00:15
Ответить

bur

Не совсем так. HTML - это язык разметки, который "понимает" браузер и строит на его основе (а также на основе CSS и JavaScript) иерархию объектов в соот-ии с DOM - Document Object Model (объектная модель документа).

Например ссылка (тег <a>) в представлении браузера - это тоже объект, который можно получить для манипуляций, причем не важно как: через getElementById или getElementsByTagName или еще кучей способов.

Можно изменять свойства и методы всех объектов, которые одновременно являются HTML-элементами, например можно переписать метод onclick:

var a = document.getElementById("linkId"); // Получим ссылку с идентификатором 'linkId'
a.onclick = function() {
   alert('Ты по мне кликнул!');
}


Но, чтобы не перезаписывать имеющиеся обработчики события click лучше воспользоваться методами addEventListener и attachEvent (для добавления) которые могут добавить новый обработчик в стек.

Надеюсь что-то будет понятно :-)
05.11.2008, 12:00
Ответить
© 2008—2017 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100