[HTML|JS|CSS] jQuery : Zdarzenia

Korzystając z biblioteki jQuery, programista ma do dyspozycji zdarzenia JavaScript, ale nie musi się do nich dowiązywać w kodzie HTML. Cała obsługa zdarzeń realizowana jest w pliku .js. Dzięki selektorom programista może dowiązać się do wielu zdarzeń za pomocą jednego selektora.

Zdarzenia można pogrupować w 4 kategorie.

• Zdarzenia dokumentu (okna)

//po zaladowaniu dokumentu HTML
$(document).ready(function(){
   console.log('event ready');
 });
//po zaladowaniu wszystkich zasobow
$(window).load(function(){
   console.log('event load');
 });
//po zamknieciu okna przegladarki 
//lub przejsciu do nowej strony 
//za posrednictwem paska adresu lub odnosnika
$(window).bind('unload', function(){
   console.log('event unload');
 });
//zmiana rozmiaru okna
$(window).bind('resize', function(){
   console.log('event resize');
 });
//po scrollowaniu
$(document).scroll(function(){
   console.log('event scroll');
 });

• Zdarzenia myszy

$(document).ready(function(){
   console.log('event ready');

   //MOUSE EVENTS

   $('.events').click(function(){
 console.log('event click');
 });

   $('.events').bind('dblclick', function(){
    console.log('event dblclick');
 });

   $('.events').bind('mousedown', function(){
    console.log('event mousedown');
 });

   $('.events').bind('mouseup', function(){
    console.log('event mouseup');
 });

   $('.events').bind('mouseenter', function(){
    console.log('event mouseenter');
 });

   $('.events').bind('mouseleave', function(){
    console.log('event mouseleave');
 });

   $('.events').bind('mousemove', function(){
    console.log('event mousemove');
 });
   //usuniecie kursora myszy z okreslonego elementu
   //i jego elementu nadrzednego
   $('.events').bind('mouseout', function(){
    console.log('event mouseout');
 });
   //umieszczenie kursora myszy w obrebie 
   //okreslonego elementu i jego elementu nadrzednego
   $('.events').bind('mouseover', function(){
    console.log('event mouseover');
 });

 });

• Zdarzenia formularzy

$(document).ready(function(){
   console.log('event ready');

   //FORM EVENTS

   //edytowanie zawartosci
   $('.myform').bind('change', function(){
    console.log('event change');
 });
   //aktywowanie za pomoca Tab lub zaznaczenia
   $('.myform').bind('focus', function(){
    console.log('event focus');
 });
   //dezaktywowanie na rzecz innego elementu
   $('.myform').bind('blur', function(){
    console.log('event blur');
 });
   //zaznaczenie tekstu wewnatrz formularza
   $('.myform').bind('select', function(){
    console.log('event select');
 });
   //po zatwierdzeniu formularza elementem input
   //o typie submit 
   $('.myform').bind('submit', function(){
    console.log('event submit');
 });
   //po zatwierdzeniu formularza elementem input
   //o typie reset 
   $('.myform').bind('reset', function(){
    console.log('event reset');
 });

 });

• Zdarzenia klawiatury

$(document).ready(function(){   

   //KEYBOARD EVENTS

   //nacisniecie klawisza
   $('.myform').bind('keydown', function(){
    console.log('event keydown');
 });

   //jednokrotne lub wielokrotne nacisniecie
   $('.myform').bind('keypress', function(){
    console.log('event keypress');
 });

   //zwolnienie klawisza
   $('.myform').bind('keyup', function(){
    console.log('event keyup');
 });
 });