Руковање догађајима је још један од оних великих разлога за употребу јКуери-а. Постоје неке разлике у претраживачу у томе како се то ради, што јКуери нормализује у један једноставан АПИ, истовремено спроводећи неке најбоље праксе.
У основи постоји једна метода коју требате знати: .on()- ради овако:
$("button").on("click", function() ( // do something ));Овде дајемо .on()методи само два параметра. Име догађаја („клик“) и функција која се покреће када се тај догађај догоди на било ком од елемената у том избору. Чита прилично чисто, зар не?
Људи са неким претходним јКуери искуства могу бити упознати са друге методе обавезујуће воле .bind(), .live()или .delegate(). Не брините више због тога, модерни јКуери их је све објединио у оно .on()што увек чини најбољу праксу.
Када везујете догађај као што смо то урадили горе, можете (и обично је паметно) у функцију укључити име параметра. Тај параметар ће бити „објект догађаја“ унутар функције:
$("button").on("click", function(event) ( // event => "the event object" ));Кроз тај објекат догађаја добијате пуно информација. Већ сте га мало упознали јер смо то некада користили .preventDefault()и .stopPropagation(). Али у том објекту има и пуно других директних информација. Ствари попут врсте догађаја (у случају да више догађаја активира исту функцију), када се то догодило, где се догодило (координате, ако је применљиво), на ком елементу се догодило и још много тога. Вредно је редовно прегледавати објект догађаја приликом кодирања.
Постоји концепт делегирања догађаја који је изузетно важан у раду са догађајима. То је врло паметна модерна најбоља пракса. Укључује идеју опсега.
Традиционални начин размишљања о везивању догађаја је попут „пронађи сва дугмад на страници и вежи клик за њих“. То наравно делује, али је:
- Не баш ефикасно
- Крхак
Није ефикасно јер одмах присиљавате ЈаваСцрипт да пронађе све оне елементе дугмета када бисте, делегирањем, могли само пронаћи један елемент који је лакше пронаћи.
Крхко, јер ако се на страницу дода више дугмади, они су већ пропустили брод на повезу и мораће поново да се вежу.
Са делегирањем догађаја, везали бисте тај догађај клика за елемент који се налази изнад ДОМ стабла од дугмади који случајно садрже све њих. Можда је негде, можда је оно documentсамо. Када догађај клика вежете за тај елемент горе, кажете му да вас и даље занимају само кликови који су се десили на дугмадима. Затим, када се кликне на дугме, кроз природу мехурића догађаја, тај клик ће на крају покренути горњи елемент. Али објект догађаја ће знати да ли се првобитни клик догодио на неком дугмету или не, а функција коју сте поставили да се активира на том догађају ће се активирати или неће активирати знајући те информације.
У овом сцреенцаст-у то показујемо овако:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));Сада замислите ако додамо још на то . Не морамо поново везивати ниједан догађај, јер је догађај и даље срећно везан за опсег, а догађаји ће се и даље појављивати из ново додане текстуалне површине. Ово је посебно корисно у окружењима веб апликација у којима редовно додајете нове елементе на страницу.
Још једна добра ствар коју треба знати о везивању догађаја јКуери је да се они међусобно не искључују. Ако додате исти руковач кликом истом оном елементу који га већ има, додаће још један. Не преписујете претходни. јКуери ово једноставно ради прилично грациозно за вас. Увек их можете одвезати ако сте заиста желели да замените претходно везану функцију.
Ако се ради о истом тачном догађају, вреди знати да ћете, да бисте одвезали одређеног, а не другог, морати догађаје размакнути именима. То се дешава коришћењем тачке у имену догађаја, на пример click.namespace.
$("#scope").on("click.one", "textarea", function(event) ( )); $("#scope").on("click.two", "textarea", function(event) ( )); // Just remove the first $("#scope").off("click.one", "textarea");.off(), како то раније нисмо помињали, начин на који одвезујете догађаје.
Постоји много могућих ДОМ догађаја. Клик је главни главни очигледан, али постоје двоструки клик, улазак миша и тастер миша, тастатура и тастатура, посебни облици попут замућивања и промене и још много тога. Ако вас занима комплетна листа, можете набавити овакву.
Можете истовремено повезати више догађаја истовремено, овако:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));Постоје неке околности у којима чекате да се догађај деси, али кад се то догоди, више вам није стало до њега или изричито не желите да искључите функцију коју сте већ повезали. О томе се ради у .one()функцији. Стандардни случај употребе је дугме за слање обрасца (ако имате посла са Ајак-ом или нечим другим). Вероватно желите да онемогућите то дугме за слање након што га притисну док не будете могли да обрадите те информације и пружите им одговарајуће повратне информације. То наравно није једини случај употребе, али имајте то на уму. .one()== само једном.