Основы работы с DOM в JavaScript (часть 3)

В прошлых статьям мы добавляли событие через атрибут "onclick", но в JavaScript существует и другой способ, с помощью которого можно назначить выполнение функции на событие. Рассмотрим его внимательнее.

Добавление события

Метод "addEventListener(X, Y)" позволяет добавить выполнение функции Y на событие X для элемента. Событием может быть клик или движение мышкой над элементом. Вы можете найти список событий в статье "Список атрибутов для событий в JavaScript". Продемонстрируем его работу на простом примере, который возьмём из первой части этого цикла статей "Основы работы с DOM в JavaScript (часть 1)":
<div id="element">Кликни на меня!</div>
<script>
   function MyFunc(){
      alert('Мыши любят сыр!');
   }

   var element = document.getElementById('element');
   element.addEventListener('click', MyFunc);
</script>
Если написать такой код на странице, загрузить её в браузере, то при нажатии на "Кликни на меня!" будет появляться всплывающее окно:
Одному элементу можно назначить сколько угодно событий. То есть сколько угодно раз сделать "addEventListener". Но учтите, что на обработку каждого события будут тратиться вычислительные ресурсы компьютера, с которого пользователь просматривает страницу. Если сделать десять тысяч событий через "addEventListener" на одной странице, то их выполнение будет "притормаживать" браузер, либо браузер вовсе повиснет и закроется с ошибкой.
Первым параметром "addEventListener" можно передать любое событие из "Список событий и атрибутов для событий в JavaScript", но без приставки "on" в начале названия. То есть вместо "onclick" поставить "click", вместо "onkeydown" поставить "keydown" и т.д.
Вышеприведённый пример можно сократить. Потому что метод "addEventListener" позволяет передавать в себя вторым параметром целую функцию, а не её название. Попробуем продемонстрировать это, модифицировав пример:
<div id="element">Кликни на меня!</div>
<script>
   function MyFunc(){
      alert('Мыши любят сыр!');
   }

   var element = document.getElementById('element');
   element.addEventListener('click', function(){
      alert('Мыши любят сыр!');
   });
</script>
Теперь попробуем узнать, где же прячется это привязанное событие. Откройте панель разработчика и редактор HTML кода.
Рекомендуем ознакомиться со статьёй "Редактор HTML в вашем браузере", в которой описан процесс работы с панелью разработчика
В редакторе HTML кода найдите строчку из примера со словами "Кликни на меня!": При загрузке страницы напротив этой строчки появляется маленькая надпись "event" (переводится как "событие"). Если кликнуть на эту надпись, то появится список событий, который привязан к этому элементу: Теперь кликнем на строчку, чтобы увидеть что именно за функция назначена и на какое событие с элементом: - из этой информации можно понять, что наш пример выполняется правильно, и на клик по элементу назначена наша функция.

Удаление события

События можно не только создавать, но и удалять их. Делается это с помощью метода "removeEventListener(X, Y)". Этот метод позволяет удалить выполнение функции Y на событие X для элемента. Ради демонстрации работы сделаем бессмысленный пример: модифицируем предыдущий пример так, чтобы сначала добавить событие. а потом удалить его. Но сделаем несколько функций (MyFunc1, MyFunc2 и MyFunc3), потому что метод удаляет определённую функцию. Получится такой код:
<div id="element">Кликни на меня!</div>
<script>
   function MyFunc1(){
      alert('Тише, мыши, кот на крыше');
   }
   function MyFunc2(){
      alert('Кот пошёл за молоком');
   }
   function MyFunc3(){
      alert('А котята кувырком');
   }

   var element = document.getElementById('element');

   // добавляем события
   element.addEventListener('click', MyFunc1);
   element.addEventListener('click', MyFunc2);
   element.addEventListener('click', MyFunc3);

   // удаляем событие
   element.removeEventListener('click', MyFunc2);
</script>
В результате выполнения этого кода к элементу "Кликни на меня!" будет привязано только функции "MyFunc1" и "MyFunc3". Можно проверить это в HTML редакторе: Кликнем на первую строчку, чтобы посмотреть на событие. Здесь описана функция "MyFunc1": Кликнем на вторую строчку. Здесь "MyFunc3": А функции "MyFunc2" нет, потому что она была удалена через "removeEventListener".
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: