Начини за обработка на събитие към определени елементи

Нека разгледаме следните начини за обработка на събитие към определени елементи в документа под JavaScript.

За целта разполагаме с HTML документ. В тялото поместваме бутон с име според разгледания начин за прихващане на събитие, като името на бутона ще повтаря името на метода или свойството. Клик по бутона ще генерира модален прозорец с надпис Hello Profruitblog reader!, показващ резултата на нашия замисъл, а именно, че сме прихванали това събитие.

Първи начин. Inline обработка на събитие

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>обработка на събитие</title>
 <script type="text/javascript">
   function handler(){
    alert('Hello Profruitblog reader!');
   }
 </script>
</head>
<body>
 <button onclick="handler()">inline</button>
</body>
</html>

демонстрация на кода

По този начин ние вграждаме обработчик в самия HTML - таг. В таг button добавяме събитие onclick, в чийто кавички посочваме нашия обработчик handler. Не забравяме скобите (), нужни за инициализация на тази функция.

Този начин се смята за най-елементарен, но остарял и непрофесионален. Поглед отгоре ще смятат кода ви за некашерен, тъй като прилича на миш-маш от два или повече езици.

Важно е да се схване, че събитията, които искаме да обработваме, могат да бъдат указани едва след като е заредена страницата. За това като първо събитие ще посочваме onload на обект window в последвалите примери.

Втори начин. Метод addEventListener

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>обработка на събитие</title>
 <script type="text/javascript">
  
  function handler(){
   alert('Hello Profruitblog reader!');
  }
  
  function but_2(){
   var but_2 = document.getElementById('but_2');
   
   if("addEventListener" in but_2) {  
    
    // за IE_9 и нормалните браузъри 
    but_2.addEventListener("click", handler, false); 
   } 
   else if("attachEvent" in window) {
     
     // за IE_8 и надолу
     but_2.attachEvent("onclick", handler); 
   }
  }
  
  window.onload = but_2;
 </script>
</head>
<body>
 <button id="but_2">addEventListener</button>
</body>
</html>

демонстрация на кода

Този начин идва с огромна камара код, заради старите версии браузъри на Microsoft Windows. В случая добаваме идентификатор на бутона but_2, за да уловим по него DOM-елемента. На практика ние се обръщаме към метод getElementById на обект document и предаваме като параметър името на идентификатора на бутона. В последствие викаме addEventListener. Проверяваме версията на браузъра и ако е IE8 или надолу го насочваме към съответния метод.

В свободен превод метод addEventListener може да се преведе като добави слушател на събитие. Този метод приема три параметъра. Първи параметър е събитие click. Забележете, без представка on. Втори параметър се явява името на обработчика - handler, а трети приема булево значение. При true обработчикът сработва в фаза на "захват", тоест, когато събитието "потъва". Ако е false - в фаза "изплуване".

Трети начин. Свойство onclick

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>обработка на събитие</title>
 <script type="text/javascript">
  
  function handler(){
   alert('Hello Profruitblog reader!');
  }
  
  window.onload = function(){
   but_3();
  }
   
  function but_3(){ 
   var but_3 = document.getElementById('but_3');
   but_3.onclick = handler;
  }
 </script>
</head>
<body>
 <button id="but_3">onclick</button>
</body>
</html>

демонстрация на кода

Този начин е най-популярен. Подобно на втори начин, създаваме функция function but_3(). В тялото й създаваме променлива var but_3, чиято стойност е литерал на метод getElementById от обект document с придаден параметър името на идентификатора на бутона, a към тях добавено обръщение към свойство onclick, чието значение е името на обработчика - handler. По този начин ние се привързахме към събитието.

до нови срещи ^.^

15.06.2013 profruit

WEB |

Profruit

openHAB на български

Умен звънец в openHAB

Tasmota Multipress

DIY 12V 1A WiFi Router UPS

Zigbee2MQTT клониране

LD2410 - бюджетен датчик присъствие в openHAB