Punta de Choros

27 декември 2009

На 2009г й оставаха 120ч съществуване. От календара падна поредния лист с дата 27 декември и към 10.30ч сутринта ме събуди звън от телефона.

Инсталация на Microsoft шрифтове в Ubuntu 16.04

14 януари 2017

нсталация на Microsoft шрифтове в Ubuntu се поражда от идеята браузърите в различните системи, да показват еднакво текстовото съдържанието на интернет страниците.

Ubuntu 16.04 инсталация на USB disk on Key

19 ноември 2016

Арсеналът ми от мобилни компютри съдържа Fujitsu Lifebook AH530. Това е бюджетна машина от 2011г на Intel Core i5-480M процесор и 4GB DDR3 RAM памет.

gparted

Paragon ExtFS for Windows

30 юли 2016

ExtFS for Windows е утилита на Paragon Software разработена през 2013г. Тя представлява решение, предоставящо пълен достъп на четене и на запис до раздели ...

msvcr100.dll is missing Windows 10

04 октомври 2016

Майк Патерсън от Plixer, компания по компютърната сигурност, публикува доклад , че Windows 10 изпраща данни в криптиран вид от вашата машина на всеки пет минути. Той е направил максимума, за да спре изтичането, но системата продължавала да изпраща информация.


Нека разгледаме следните начини за обработка на събитие към определени елементи в документа под 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 

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

Публикуване на коментар

Този блог е реинкарнация на първите ми опити за споделяне в нета. На времето започнах с къси разкази на преживяното. После се обезсмисли и превърнах блога си в системно радио. Пиша единствено неща, които карат душата ми да живее: Ubuntu, WEB, Photoshop, Фотография, Споделено и т.н. Това е моето системно радио, разбирате ли? Моята вълна и вие сте на нея сега.

Архив на блога