Tratarea evenimentelor în jQuery

jQuery este special conceput pentru a răspunde la evenimentele dintr-o pagină HTML.

Ce sunt evenimentele?

Toate acțiunile vizitatorilor la care o pagină web poate răspunde sunt numite evenimente.
Un eveniment reprezintă momentul exact când se întâmplă ceva.

Exemple:

Evenimentul "Document Ready"

Metoda $(document).ready() ne permite să executăm o funcție în cazul în care documentul(pagina web) este complet încărcat.
Majoritatea metodelor jQuery sunt folosite în cadrul evenimentului "document ready":

$(document).ready(function(){

// metode jQuery pentru evenimente de mouse

$("button").click(function(){
alert( "Butonul a fost apasat." );
});

$("#other").hover(function(){
alert( "Butonul a fost apasat." );
});

});

...

<div id="other" style="background-color:#CCC">
Aici se declanșează trigger pentru handler de hover.
</div>
<button>BUTONUL!</button>

Acest lucru este util pentru a preveni execuția unui cod jQuery înainte ca documentul să se încarce complet.


Evenimente de tastatură

.focusout()

Legarea unui handler de evenimentul “focusout”.

.keydown()

Legarea unui handler de evenimentul “keydown”, sau declanșarea evenimentului pe un element.

$(document).ready(function(){

// metode jQuery pentru evenimente de tastatură

$( "#target" ).keydown(function() {
alert( "Handler-ul pentru .keydown() a fost apelat." );
});

});

...

<form>
<input id="target" type="text" value="Hello there">
</form>
<div id="other">
Trigger the handler
</div>

.keypress()

Legarea unui handler de evenimentul “keypress”, sau declanșarea evenimentului pe un element.

Bind an event handler to the “keypress” JavaScript event, or trigger that event on an element.

.keyup()

Legarea unui handler de evenimentul “keyup”, sau declanșarea evenimentului pe un element.

Evenimente de mouse

.click()

Legarea unui handler de evenimentul “click”, sau declanșarea evenimentului pe un element.

.dblclick()

Legarea unui handler de evenimentul “click”, sau declanșarea evenimentului pe un element.

.focusout()

Legarea unui handler de evenimentul “focusout”.

.hover()

Legarea unui singur sau a două handlere la elementele indicate, execuție în momentul în care săgeata mouse-ului intră și părăsește elementele.

.mousedown()

Legarea unui handler de evenimentul “mousedown”, sau declanșarea evenimentului pe un element.

.mouseenter()

Legarea unui handler de momentul în care săgeata mouse-ului ajunge pe un element.

.mouseleave()

Legarea unui handler de momentul în care săgeata mouse-ului părăsește un element.

.mousemove()

Legarea unui handler de evenimentul “mousemove”, sau declanșarea evenimentului pe un element.

.mouseout()

Legarea unui handler de evenimentul “mouseout”, sau declanșarea evenimentului pe un element.

.mouseover()

Legarea unui handler de evenimentul “mouseover”, sau declanșarea evenimentului pe un element.

.mouseup()

Legarea unui handler de evenimentul “mouseup”, sau declanșarea evenimentului pe un element.

Evenimente ale formularelor

.blur()

Legarea unui handler de evenimentul “blur”, sau declanșarea evenimentului pe un element.

.change()

Legarea unui handler de evenimentul “change”, sau declanșarea evenimentului pe un element.

.focus()

Legarea unui handler de evenimentul “focus”, sau declanșarea evenimentului pe un element.

.focusin()

Legarea unui handler de evenimentul “focusin”.

.select()

Legarea unui handler de evenimentul “select”, sau declanșarea evenimentului pe un element.

.submit()

Legarea unui handler de evenimentul “submit”, sau declanșarea evenimentului pe un element.

$(document).ready(function(){

// metode jQuery pentru formulare

$( "#target" ).submit(function( event ) {
alert( "Handler-ul pentru ".submit()" a fost apelat." );
event.preventDefault();
});

});

...

<form id="target" action="destination.html">
<input type="text" value="Hello there">
<input type="submit" value="Go">
</form>
<div id="other">
Trigger the handler
</div>


Temă: De creat o pagina care tratează cel puțin 5 dintre evenimentele prezentate mai sus.