Această metodă se bazează pe utilizarea atributului, care este dat pe # 91; # 93 eveniment;. unde Eveniment # 93; este numele unui anumit eveniment.
Acțiuni de bază: adăugați un atribut specific elementului (de exemplu: onclick - unde: pe standul evenimentului și faceți clic pe tipul evenimentului) cu valoarea care conține instrucțiunea sau funcția. Acest operator sau funcție va fi executat atunci când apare acest eveniment pe element.
De exemplu, adăugați un eveniment clic pe buton. atunci când apare, mesajul va fi afișat utilizând metoda de alertă:
Dacă trebuie să executați un anumit cod în dispozitivul de tratare a evenimentelor, trebuie să utilizați funcția.
De exemplu, vom face exemplul de mai sus folosind funcția:
De exemplu, adăugați un eveniment clic pe buton. la debutul căruia se efectuează funcția specificată:
Această variantă de abonare la eveniment nu este recomandată, deoarece acesta nu doar aglomerează codul HTML, ci are și limitări asociate cu utilizarea obiectului eveniment. cuvinte cheie și altele.
De exemplu, adăugați un buton, care are id = „myButton“ click eveniment. la debutul căruia se efectuează funcția specificată:
Dacă un eveniment este specificat printr-un atribut, atunci browserul, prin citirea codului HTML, creează automat proprietatea corespunzătoare. Ie Browserul funcționează cu evenimente numai cu ajutorul proprietăților corespunzătoare ale obiectului (element).
Dacă vă abonați la eveniment în diferite moduri, adică prin atributul și folosirea proprietății, browserul în acest caz va utiliza numai varianta implementării evenimentului, efectuată cu proprietatea. Pentru a vă abona la evenimente este mai bună doar cu ajutorul proprietăților corespunzătoare ale obiectului (elementului), nu se recomandă utilizarea atributelor în aceste scopuri.
Metoda addEventListener. este destinat să adauge un ascultător al unui anumit eveniment unui element și să execute un apel invers atunci când acesta are loc. În plus față de metoda addEventListener, există o altă metodă, removeEventListener. care este proiectat să efectueze o acțiune inversă, adică pentru a șterge ascultătorul.
Sintaxa pentru metodele addEventListener și removeEventListener este:
Metoda addEventListener are 3 parametri:
De exemplu, folosind o funcție anonimă pentru a gestiona un eveniment de clic:
De exemplu, utilizând funcția myFunction () pentru a gestiona un eveniment de clic:
Managerul de evenimente pe care l-ați adăugat utilizând metoda addEventListener () poate fi eliminat, dacă este necesar, utilizând metoda removeEventListener (). Puteți să eliminați dispozitivul de tratare a evenimentelor numai dacă este specificat în funcția numită în metoda addEventListener (). Dacă setați funcția de manipulare ca o funcție anonimă în metoda addEventListener (). nu poate fi eliminat utilizând metoda removeEventListener ().
De exemplu, adăugați și apoi eliminați handle-ul myFunction pentru evenimentul mousemove al obiectului document:
De exemplu, adăugați mai mulți agenți de procesare a evenimentelor care vor fi executați atunci când un utilizator face clic pe o zonă din document:
De exemplu, adăugați agenți de manipulare la următoarele evenimente: faceți clic pe. mouseover. mouseout.
De exemplu, pentru a trimite valori ale parametrilor unui handler, vom folosi o funcție anonimă. În această funcție anonimă vom folosi încă o funcție (numită) cu care vom transfera parametrii necesari:
De exemplu, atunci când apare un eveniment clic într-un document, schimbați culoarea de fundal a elementului corpului. Operatorul de evenimente este executat ca o funcție anonimă.
Cum să lucrați corect cu evenimentele
Codul de mai sus poate fi scris mai succint, folosind o funcție anonimă:
Este mai corect să nu lucrați cu evenimentul de încărcare (apare după încărcarea completă a paginii), dar cu evenimentul DOMContentLoaded. care apare după ce browserul a încărcat documentul HTML și a construit arborele DOM. Ie pentru a lucra cu arborele DOM, nu este nevoie să așteptați până când toate resursele paginii HTML sunt încărcate suficient pentru ca browserul să construiască arborele DOM.
Codul de mai sus poate fi scris mai succint, folosind o funcție anonimă:
Semnează simultan evenimentul mai multe obiecte simultan
De exemplu, puteți să semnați toate elementele p la evenimentul clic. Procesați evenimentul utilizând funcția myFunction ():