Metody událostí jQuery

jQuery je šitý na míru, aby reagoval na události na stránce HTML.

Co jsou události?

Všechny různé akce návštěvníků, na které může webová stránka reagovat, se nazývají události.

Událost představuje přesný okamžik, kdy se něco stane.

Příklady:

pohybem myši nad prvkem
výběrem přepínače
kliknutím na prvek

Termín "požáry/vypálený" se často používá u událostí. Příklad: "Událost stisknutí klávesy se spustí v okamžiku, kdy stisknete klávesu".

Zde jsou některé běžné události DOM:

Mouse Events	Keyboard Events	Form Events	Document/Window Events
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

Syntaxe jQuery pro metody událostí

V jQuery má většina událostí DOM ekvivalentní metodu jQuery.

Chcete-li přiřadit událost kliknutí všem odstavcům na stránce, můžete to udělat takto:

$("p").click();

Dalším krokem je definovat, co by se mělo stát, když se událost spustí. Do události musíte předat funkci:

$("p").click(function(){
// action goes here!!
});

Běžně používané metody událostí jQuery

$(document).ready()

Tato $(document).ready()metoda nám umožňuje provést funkci, když je dokument plně načten. Tato událost je již vysvětlena v kapitole Syntaxe jQuery .

klikni()

Metoda click()připojí funkci obsluhy události k prvku HTML.

Funkce se spustí, když uživatel klikne na prvek HTML.

Následující příklad říká: Když se na <p>prvku spustí událost click; skrýt aktuální <p>prvek:

Příklad

$("p").click(function(){
$(this).hide();
});

dblclick()

Metoda dblclick()připojí funkci obsluhy události k prvku HTML.

Funkce se spustí, když uživatel dvakrát klikne na prvek HTML:

Příklad

$("p").dblclick(function(){
$(this).hide();
});

mouseenter()

Metoda mouseenter()připojí funkci obsluhy události k prvku HTML.

Funkce se provede, když ukazatel myši vstoupí do prvku HTML:

Příklad

$("#p1").mouseenter(function(){
alert("You entered p1!");
});

mouseleave()

Metoda mouseleave()připojí funkci obsluhy události k prvku HTML.

Funkce se provede, když ukazatel myši opustí element HTML:

Příklad

$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});

mousedown()

Metoda mousedown()připojí funkci obsluhy události k prvku HTML.

Funkce se provede, když je stisknuto levé, střední nebo pravé tlačítko myši, zatímco je myš nad prvkem HTML:

Příklad

$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});

mouseup()

Metoda mouseup()připojí funkci obsluhy události k prvku HTML.

Funkce se provede, když uvolníte levé, střední nebo pravé tlačítko myši, zatímco je myš nad prvkem HTML:

Příklad

$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});

vznášet se()

Metoda hover()má dvě funkce a je kombinací metod mouseenter()a mouseleave() .

První funkce se provede, když myš vstoupí do prvku HTML, a druhá funkce se provede, když myš opustí prvek HTML:

Příklad

$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});

zaměřit se()

Metoda focus()připojí funkci obsluhy události k poli formuláře HTML.

Funkce se provede, když se pole formuláře zaměří:

Příklad

$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});

rozmazat()

Metoda blur()připojí funkci obsluhy události k poli formuláře HTML.

Funkce se provede, když pole formuláře ztratí fokus:

Příklad

$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});

Metoda on().

Metoda on()připojí jednu nebo více obslužných rutin událostí pro vybrané prvky.

Připojení události kliknutí k <p>prvku:

Příklad

$("p").on("click", function(){
$(this).hide();
});

<p>Připojte k prvku více obslužných rutin událostí :

Příklad

$("p").on({
mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
});

Cvičení jQuery