JavaScript - DOM Events - zdarzenia

Sposoby dołączania zdarzenia do elementu:

1. Procedury obsługi zdarzeń w atrybutach HTML.

<znacznik zdarzenie="instrukcja">
 lub
<znacznik zdarzenie="nazwaFunkcji()">

Ad 1.1

<button onclick="alert('Przycisk został kliknięty.');">Kliknij w ten przycisk</button>
wyświetl przykład

Ad 1.2

<button onclick="myFunction()">Kliknij w ten przycisk</button>

<script type="text/javascript">
function myFunction() {
    alert('Przycisk został kliknięty.');
}
</script>
wyświetl przykład

2. Tradycyjne procedury obsługi zdarzeń w modelu DOM.

Do tego sposób obsługi zdarzeń można przypisać tylko jedną funkcję.

element.onzdarzenie = nazwaFunkcji;

element element Węzeł elementu w modelu DOM
onzdarzenie zdarzenie poprzedzone przedrostkiem on zdarzenie dołączone do węzła.
nazwaFunkcji kod nazwa funkcji przyłączonej do węzła (bez nawiasu na końcu)

Ad 2

<button id="klik">Kliknij w ten przycisk</button>

<script type="text/javascript">
function myFunction() {
    alert('Przycisk został kliknięty.');
}

var el = document.getElementById('klik');
el.onclick = myFunction;
</script>
wyświetl przykład

3. Obserwatory zdarzeń (DOM LEVEL 2).

Do tego sposób obsługi zdarzeń można przypisać wiele funkcji.

element.addEventListener('zdarzenie', nazwaFunkcji [, wartość_bolowska]);

element - element - Węzeł elementu w modelu DOM.
.addEventListener('zdarzenie', nazwaFunkcji [, wartość_bolowska]) - metoda - dodaje ona obserwatora zdarzeń do węzła elementu w modelu DOM.
'zdarzenie' - zdarzenie - Zdarzenie dołączone do węzła, ujęte w znaki cytowania.
nazwaFunkcji - kod - Nazwa funkcji przeznaczonej do wywołania.
[, wartość_bolowska] - przepływ zdarzeń - wskazuje sposób przepływu zdarzeń. Najczęściej ma przepisaną wartość false.

Ad 3

<button id="klik">Kliknij w ten przycisk</button>

<script type="text/javascript">
function myFunction() {
    alert('Przycisk został kliknięty.');
}

var el = document.getElementById('klik');
el.addEventListener('click', myFunction, false);
</script>
wyświetl przykład




Zdarzenia interfejsu użytkownika (User Interface) - są skutkiem interakcji z oknem przeglądarki a nie wyświetlaną przez nią stroną.

zdarzenie opis
onload Zakończenie wczytywania dokumentu (tylko BODY i FRAMESET)
onunload Usunięcie dokumentu (tylko BODY i FRAMESET)
onerror Przeglądarka internetowa napotyka błąd lub gdy zasób nie istnieje.
onresize Zmiana wielkości okna przeglądarki internetowej.
onscroll Przewinięcie zawartości okna w górę lub w dół.




Zdarzenia klawiatury - interakcja z klawiaturą.

zdarzenie opis
onkeydown Wciśnięcie klawisza
onkeypress Wciśnięcie lub przytrzymanie klawisza.
onkeyup Zwolnienie klawisza




Zdarzenia myszy - interakcja z myszą, gładzikiem lub ekranem dotykowym.

zdarzenie opis
onclick Kliknięcie myszką
ondblclick Podwójne kliknięcie myszką
onmousedown Wciśnięcie dowolnego klawisza myszki
onmouseup Zwolnienie klawisza myszki
onmousemove Poruszanie myszką nad elementem
onmouseover Wskazanie myszką
onmouseout Wskaźnik myszki opuszcza element




Zdarzenia aktywności
Jeżeli z danym elementem HTML można prowadzić interakcję, to element ten może stać się aktywny lub nieaktywny.
Klawiszem Tab można poruszać się pomiędzy elementami które mogą być aktywne.

zdarzenie opis
onblur Element traci zogniskowanie (przeciwne do onfocus)
onfocus Element otrzymuje zogniskowanie (aktywność) przez myszkę lub klawiszem TAB (obsługiwane przez: A, AREA, LABEL, INPUT, SELECT, TEXTAREA i BUTTON)

zdarzenie wywołanie przepływ zdarzeń
onblur Kiedy element staje się nieaktywny, dla jego węzła DOM jest wywoływane zdarzenie blur
The event occurs when an element loses focus		 przechwytywanie
onfocus Kiedy element staje się aktywny, dla jego węzła DOM jest wywoływane zdarzenie focus
The event occurs when an element gets focus		 przechwytywanie
onfocusin The event occurs when an element is about to get focus przechwytywanie i propagowanie
onfocusout The event occurs when an element is about to lose focus przechwytywanie i propagowanie




Zdarzenia formularzy sieciowych - występują gdy prowadzimy interakcje z elementami formularza sieciowego.

zdarzenie opis
onchange Element został zmodyfikowany i utracił zogniskowanie (tylko INPUT, SELECT i TEXTAREA)
oncopy Skopiowanie zawartości z pola formularza sieciowego.
oncut Wycięcie zawartości z pola formularza sieciowego.
oninput Zmianie ulega wartość w dowolnym elemencie <input>>lub <textarea>
onpaste Wklejenie zawartości do pola formularza sieciowego.
onreset Wyczyszczenie formularza (tylko element FORM)
onselect Użytkownik zaznaczył pewien tekst w polu tekstowym (tylko INPUT i TEXTAREA)
onsubmit Wysłanie formularza sieciowego (tylko element FORM)




Zdarzenia dotyczące zmian - występują gdy nastąpi zmiana struktury modelu DOM.

DOMAttrModified
DOMAttributeNameChanged
DOMCharacterDataModified
DOMElementNameChanged
DOMNodeInserted Węzeł został wstawiony jako bezpośredni element potomny innego węzła.
DOMNodeInsertedIntoDocument Węzeł został wstawiony jako element potomny inndgo węzła.
DOMNodeRemoved Węzeł został usunięty z innego węzła.
DOMNodeRemovedFromDocument Węzeł został usunięty jako element potomny innego węzła.
DOMSubtreeModified Wprowadzono zmianę w dokumencie.




Zdarzenie onload

Zdarzenie onload powstaje, kiedy strona WWW jest wczytywana do przeglądarki i powinno być przypisane do znacznika body.

<body onload="procedura_obsługi">
np.:

<body onload="alert('Strona została załadowana.');">
wyświetl przykład




Funkcja jako procedura obsługi zdarzenia.

<head>
<script type="text/javascript">
function wyswietl()
{
    alert('Strona została załadowana.');
}
</script>
</head>
<body onload="wyswietl();">
wyświetl przykład




Przypisanie dwóch zdarzeń do znacznika.

<body
 onload="alert('Strona została załadowana.');"
 onunload="alert('Właśnie opuszczasz stronę.');"
>



Zdarzenie onresize

<body onresize="alert('Nastąpiła zmiana wielkości okna przeglądarki internetowej.');">
wyświetl przykład




Zdarzenie onscroll

<body onscroll="alert('Przewinięcie zawartości strony w górę lub w dół.');">
wyświetl przykład




Zdarzenie onclick

<button onclick="alert('Przycisk został kliknięty.');">Kliknij w ten przycisk.</button>
wynik skryptu




<head>
<script type="text/javascript">
function klikniecie() {
    alert('Przycisk został kliknięty.');
}
</script>
</head>

<button onclick="klikniecie()">Kliknij w ten przycisk.</button>
wyświetl przykład




<button id="klik">Kliknij w ten przycisk.</button>

<script type="text/javascript">
function klikniecie() {
    alert('Przycisk został kliknięty.');
}

var el = document.getElementById('klik');
el.onclick = klikniecie;
</script>
wyświetl przykład




Zdarzenie ondblclick

<button ondblclick="alert('Przycisk został dwukrotnie kliknięty.')">Kliknij dwukrotnie w ten przycisk.</button>
wynik skryptu




<head>
<script type="text/javascript">
function podwojneKlikniecie() {
    alert('Przycisk został dwukrotnie kliknięty.');
}
</script>
</head>

<button ondblclick="podwojneKlikniecie()">Kliknij dwukrotnie w ten przycisk.</button>
wyświetl przykład




<button id="dblklik">Kliknij dwukrotnie w ten przycisk.</button>

<script type="text/javascript">
function podwojneKlikniecie() {
    alert('Przycisk został dwukrotnie kliknięty.');
}

var el = document.getElementById('dblklik');
el.ondblclick = podwojneKlikniecie;
</script>
wyświetl przykład




Akapit tekstowy jako odnośnik.

<p onclick="location.assign('https://hedonskate.com/')" style="cursor:pointer">hedonskate.com</p>

<p onclick="location.assign('https://bladeville.pl/')">bladeville.pl</p>
łapka nad odnośnikiem:
style="cursor:pointer"



Akapit tekstowy jako odnośnik 2.

<script type="text/javascript">
var adresy = Array
(
    "https://hedonskate.com/",
    "https://bladeville.pl/"
)

function zmienStrone(number)
{
    if(number >= 0 && number < adresy.length){
        location.assign(adresy[number]);
    }
}
</script>

<p onclick="zmienStrone(0);" style="cursor:pointer">hedonskate.com</p>
<p onclick="zmienStrone(1);" style="cursor:pointer">bladeville.pl</p>