Funkcje obsługi zdarzeń JavaScript

Funkcje obsługi zdarzenia

zdarzenia klawiatury – który klawisz został naciśnięty.

 

DOM zawiera obiekt event zawierający informacje o zdarzeniu.

onKeyPress=”getkey(event);”

 

Zdarzenia HTML5:

Mouse event

  • onClick – kliknięcie przycisku myszy
  • onDbClick – podwójne kliknięcie przycisku myszy
  • onMouseMove – przemieszczanie się wskaźnikia myszy aby włączyć nalezy posłuzyć się przechwytywaniem zdarzeń
  • onMouseOut – zjechanie wskaźnikiem myszy z elementu
  • onMouseOver – najechanie wskaźnikiem myszu na element
  • onMouseDown – naciśnięcie przycisku myszy
  • onMouseUp – puszczenie przycisku myszy
  • onMouseWheel

 

dla kliknięcie (czyli dla zdarzeń: onClick, onDblClick, onMouseUp, onMouseDown) przydzielona jest właściwość event – button – określa który przycisk został kliknięty:

  • Lewy – 0 lub 1
  • Prawy – 2

 

keyboard event

  • onKeyDown – wciśnięcie klawisza
  • onKeyUp – zwolnienie klawisza
  • onKeyPress – naciśnięcie klawisza

 

sprawdzenie który klawisz został naciśnięty poprzez obiekt event – wysłany do funkcji obsługi zdarzenia w momencie zaistnienia zdarzenia.

właściwość event.witch – kod znaku ASCII wciśniętego klawisza. (IE obsługuje event.keyCode).

więc stosujemy:


keycode = e.keyCode || e.which;

keycode = event.which || event.keyCode;

–

 

fromCharCode – konwersja kodu ASCII na faktyczne litery – character = String.fromCharCode(keycode);

 


<body onKeyPress="DisplayKey(event)">

&nbsp;

–

 

  • onChange
  • onDrag
  • onDragEnd
  • onDragEnter
  • onDragLeave
  • onDragOver
  • onDragStart
  • onDrop
  • onPause
  • onPlay
  • onPlaying
  • onProgress
  • onLoadStart
  • onLoad

<a href="http://ginger-art.pl" onClick="return(window.confirm('opuszczasz stronę :('))">a sobie link</a>

–

dzięki funkcji return gdy zostaje zwrócone false (czyli kliknięte Anuluj) i przeglądarka nie przejdzie do adresu w linku.

 

 

Powiązanie elementu ze zdarzeniem:


<script>
function doLoad(){
alert("Page Loaded");
}
function doClick(){
alert("one Click")
}
</script>

<body onLoad="doLoad()">
<a href="#" onClick="doClick()">Action button</a>

–

#tools