Увод у јКуери догађаје
ЈКуери је једна од најпопуларнијих и најраширенијих ЈаваСцрипт библиотека која је развијена и дизајнирана да поједностави ХТМЛ засновану ДОМ архитектуру, тј. Својства објекта документа као што су читање, манипулација и кретање кроз стабло. Остала својства из јКуери-а као што су руковање догађајима, Ајак, стилинг и ЦСС анимација су такође поједностављена. То је опен-соурце и бесплатна библиотека која се обично користи у 73% од прибл. 10 милиона веб локација које се данас користе. Основне карактеристике Јкуери-а укључују својства заснована на ДОМ елементима, као што су селектори, манипулација и кретање по дрвећу, што рад на ЈКуери-ју чини много занимљивијим, лакшим и практичнијим.
Користи се за пружање врло једноставног и једноставног интерфејса који се може користити за примену различитих врста невероватних ефеката. Ове методе омогућавају брзо коришћење и примену најчешће коришћених функција и њихових ефеката, заједно са голим или минималним конфигурацијама. Основне команде попут оних за приказивање и скривање елемената прилично су исте, а остале се такође налазе у истој категорији са оним што би свако очекивао да их види. наредба схов () се у овом случају користи за приказивање елемената у потпуно замотаној комбинованој команди, а за скривање тих функција користи се комбинована наредба сет анд хид ().
Јкуери је рађен по мери и користи се за одговор на догађаје на ХТМЛ страници. Сами догађаји су различите акције посетилаца на које може да реагује веб страница. Другим речима, догађај се користи да мало представи тачан или тачан тренутак, посебно нешто што се догодило. Ово може укључивати сценарије попут преласка миша преко елемента, клика и одабир радио дугмета, као и клика на елемент. Израз пожара или појам отпуштено много се користи заједно са догађајем. На пример, догађај притиска на тастер активира се или се популарније назива „отпуштен“, углавном је то тренутак у којем притиснете тастер. Ево листе најчешћих и најчешће коришћених ДОМ догађаја.
Догађаји миша као што су дблцлицк, моуселеаве, моусеентер, цлицк. Постоје и неки други догађаји на тастатури, попут тастатуре, тастатуре и притиска на тастер. Постоје и други облици догађаја као што су промена, слање, замагљивање и фокусирање догађаја. Постоје и други догађаји који су догађаји Доцумент или Виндов, као што су величина, учитавање, помицање, истовар итд. У Јкуери-у, већина догађаја заснованих на ДОМ-у има одговарајућу методу јкуери. Стога да бисте додељели нови догађај свим постојећим параграфима на страници, синтакса испод може се искористити.
Догађаји и синтакса јКуери-а
Ево следећих догађаја јКуери-а са синтаксом датом у наставку
1. Кликните ()
Овај догађај се догађа кад се елемент кликне. Ова метода цлицк () користи се да покрене кликнути елемент који је познат и као догађај клика који се користи за повезивање на функцију кад год се догоди догађај повезан са кликом.
Синтакса
$(selector).click()
Када желите да приложите функцију овом догађају клика,
$(selector).click(function)
Сљедећи корак увијек долази заједно са акцијом и окидачем који формирају стварни рад и функционирање функције, па стога кад год се догађај отпусти, функција треба пренијети на догађај.
Пример
$("p").click(function()(
// action which is triggered goes here!! ));
2. Дблцлицк ()
Ова метода се користи за додавање функције алата за обраду догађаја датом ХТМЛ елементу. Ова се функција извршава кад корисник удвостручи клик на ХТМЛ елемент.
Синтакса
$(selector).dblclick()
Пример
$("p").dblclick(function()(
$(this).hide();
));
3. промени ()
Овај догађај се догађа кад год се промијени вриједност одређеног елемента, тј. Ради само за унос, тектареа и одабране елементе. Метода цханге () се користи да покрене догађај промене или онај који се веже за функцију кад год се мора десити догађај повезан са променом.
Синтакса
$(selector).change()
Пример
$("input").change(function()(
alert("This text related to this has been changed.");
));
4. замагљивање ()
Овај догађај повезан са замућењем догађа се само када елемент изгуби фокус. Метода замућивања () која се користи да покрене догађај замућења или она која се користи за повезивање функције која се покреће кад год се догоди замагљивање. Ова метода се користи често са методом фокус ().
Синтакса
$(selector).blur()
Пример
$("input").blur(function()(
alert("The field has lost its focus.");
));
5. подаци
Ово својство евент.дата користи се за садржавање необвезно посланих података који се односе на методу догађаја када је извршни руковатељ струјом везан.
Синтакса
event.data
Пример
$("p").each(function(i)(
$(this).on("click", (x:i), function(event)(
alert("This index + ". paragraph has data: " + event.data.x);
));
));
6. Простор имена
Ово својство се користи за враћање прилагођеног простора имена сваки пут када се догађај покрене. Својство постављају аутори додатака који се могу користити за различито руковање задацима, што зависи од простора имена који се користи. Простори имена који почињу с подвлаком су резервисани простори имена за ЈКуери.
Синтакса
event.namespace
Пример
$("p").on("custom.someNamespace", function(event)(
alert(event.namespace);
));
7. ПагеКс
Ово је својство типа странице које се користи за враћање позиције показивача миша која је повезана са левом ивицом документа. Ова врста имовине се често користи за догађај. Својство ПагеИ.
Синтакса
event.PageX
Пример
$(document).mousemove(function(event)(
$("span text ").text("X: " + event.pageX);
));
8. ПагеИ
Ово је својство типа странице које се користи за враћање положаја показивача миша које је повезано са горњом ивицом документа. Ова врста имовине се често користи за догађај. Својство ПагеКс.
Синтакса
event.PageY
Пример
$(document).mousemove(function(event)(
$("span text ").text("Y: " + event.pageY);
));
9. резултат
Својство евент.ресулт користи се да садржи претходну или последњу вредност коју враћа руковатељ догађаја, а што је посебно покренуто одређеним догађајем.
Синтакса
event.result
Пример
$("button").click(function()(
return "Hi there!";
));
10. превенДефаулт ()
Ова метода везана за догађај.превентДефаулт () користи се за заустављање дешавања задане радње одређеног елемента. Примери овог сценарија укључују:
Спречавање дугмета за подношење од предаје обрасца
Спречите везу да приступи одређеној УРЛ адреси.
Одређени догађај као што је догађај.превентДефаулт () користи се за провјеру да ли се за позивање догађаја користи метода или функција превенДефаулт ().
Синтакса
event.preventDefault()
Пример
$("a").click(function(event)(
event.preventDefault();
));
11. Евент.таргет ()
Ово својство се користи за враћање ДОМ елемента који треба покренути овај догађај. Најчешће је корисно упоредити циљни догађај са тим да би се утврдило да ли се одређеним догађајем рукује због догађаја који се зове буббинг.
Синтакса
event.target
Пример
$("p, button, h2").click(function(event)(
$("div").html("Hi, triggered is " + event.target.NameNode + " new element.");
));
12. тимеСтамп
Ово својство се користи за враћање броја милисекунди од времена 1. јануара 1970. године, што одговара првом тренутку када је догађај први пут покренут.
Синтакса
event.TimeStamp
Пример
$("button").click(function(event)(
$("span").text(event.timeStamp);
));
13. тип
Ово се користи за надгледање догађаја и његове врсте која се покреће.
Синтакса
event.type
Пример:
$("p").on("click dblclick and mouse related events", function(event)(
$("div").html("Event: " + event.type);
));
14. који ()
Ово својство се користи за враћање тастера тастатуре или типке миша која је притиснута за догађај.
Синтакса
event.which
Пример
$("input").keydown(function(event)(
$("div").html("Key: " + event.which);
));
15. фокус ()
Ово својство и фокус овог догађаја настаје када се елемент користи за добијање фокуса до којег долази када је одабран кликом миша или навигацијом по картици. Метода фокус () користи се за покретање догађаја фокусирања или додавање функције која се покреће када се догоди догађај у фокусу.
Синтакса
$(selector).focus()
Пример
$("input").focus(function()(
$("span").css("display", "inline").fadeOut(200);
));
16. лебдјети ()
Ова метода лебдења користи се за специфицирање двију функција које се покрећу када показивач миша пређе преко свих одабраних елемената. Овом методом покрећу се и догађаји моуселеаве и моусеентер. Ако је одређена само једна функција, она ће се покренути и за догађаје моуселеаве и моусеентер.
Синтакса
$(selector).hover(inFunction, outFunction)
Пример
$("p").hover(function()(
$(this).css("background-color", "blank");
), function()(
$(this).css("background-color", "yellow");
));
17. кеидовн ()
Редослед догађаја који су у вези са догађајем на тастатури су:
- Кеидовн: користи се када се кључ налази на путу према доле.
- Притисак на тастер : То се дешава када притиснете тастер тастатуре
- Типковница: Као што име сугерира, користи се када се притисне типка горње стране.
Синтакса
$(selector).keydown()
Пример
$("input").keydown(function()(
$("input").css("background-color", "black");
));
18. тастер ()
Редослед догађаја који су повезани са догађајем притиска на тастер је:
- Кеидовн: користи се када се кључ налази на путу према доле.
- Притисак на тастер : То се дешава када притиснете тастер тастатуре
- Типковница: Као што име сугерира, користи се када се притисне типка горње стране.
Синтакса
$(selector).keypress()
Пример
$("input").keypress (function()(
$("input").css("background-color", "black");
));
19. кеиуп ()
Редослед догађаја који су повезани са догађајем тастатуре је:
- Кеидовн: користи се када се кључ налази на путу према доле.
- Притисак на тастер : То се дешава када притиснете тастер тастатуре
- Типковница: Као што име сугерира, користи се када се притисне типка горње стране.
Синтакса
$(selector).keyup()
Пример
$("input").keyup(function()(
$("input").css("background-color", "black");
));
20. Ливе ()
Ова живи () метода или функција јкуери-а користи се за прикључивање једног или више манипулатора заснованих на догађајима који ће се користити посебно за изабране листе елемената, а одређује и функцију која ће се покренути тамо гдје се догађаји догађају. Сви руковаоци догађајима су приложени помоћу ливе () методе која ће радити и за тренутне и за БУДУЋЕ елементе који се заснивају на подударању селекторских елемената који могу бити попут новог елемента креираног скрипту. Метода дие () се може користити за уништавање ливе () методе.
Синтакса
$(selector).live(event, data, function)
Пример
$("button").live("click", function()(
$("p").slideToggle();
));
21. Учитавање ()
Метода учитавања користи се за додавање алата за обраду догађаја на догађај на бази оптерећења. Догађај учитавања догађа се сваки пут када се наведени догађај догоди и ради кад год су елементи повезани са УРЛ-ом, попут слике, оквира, скрипте, ифраме-а и објекта прозора. Догађај учитавања може или не мора да се покрене и зависи од прегледача чак и ако је слика у кешираном стању. Постоји и АЈАКС метода која је јкуери метода позната као лоад (), а која се зове зависи од параметара.
Синтакса
$(selector).load(function)
Пример
$("img").load(function()(
alert("stuff loaded.");
));
22. Моуседовн
Овај догађај се дешава само када се леви тастер показивача миша притисне изнад одабране листе елемента. Метода или функција моуседовн () користи се за покретање овог догађаја који повезује функцију и покреће се кад год се догоди моуседовн догађај. Ова метода се често користи заједно са методом моусеуп ().
Синтакса
$(selector).mousedown()
Пример
$("div").mousedown(function()(
$(this).after("Down button pressed with mouse.");
));
23. Искључено ()
Ова метода се користи за уклањање алата за обраду догађаја који је приложен заједно са методом он (). Може се рећи да је замена методе унндинд (), дие () и унделегате () метода. Ова метода се користи да би се досло до пуно доследности АПИ-ју и увек се препоручује да се користи ова метода, јер се користи за поједностављење базе Јкуери кода.
Синтакса
$(selector).off(event, selector, function(eventObj), map)
Пример
$("button").click(function()(
$("p").off("click");
));
24. моусеентер ()
Овај догађај се догађа кад год се показивач миша пређе преко наведеног елемента и унесе док активира догађај мишентер или се користи за повезивање функције која се може користити за покретање кад год се догоди догађај који се заснива на мишу.
Синтакса
$(selector).mouseenter()
Пример
$("p").mouseenter(function()(
$("p").css("background-color", "black");
));
25. моуселеаве ()
Овај догађај се догађа кад год је показивач миша изнад наведеног елемента и одлази када покреће догађај напуштања миша или се користи за уклањање функције која се може користити за покретање кад год се догоди догађај заснован на подметању миша.
Синтакса
$(selector).mouseleave()
Пример
$("p").mouseleave(function()(
$("p").css("background-color", "black");
));
Јкуери је једна од најчешће коришћених библиотека када је у питању развој на крају. Ово пружа јединствене карактеристике и широк спектар функција које помажу у олакшавању и удобности живота програмера и људи широм света. Надам се да вам се свидео наш чланак. Пратите наш блог за више оваквих.
Препоручени чланци
Ово је водич за јКуери догађаје. Овде смо расправљали о листи најчешћих и најчешће коришћених различитих догађаја јКуери-а са синтаксом и примерима. Можда ћете такође погледати следеће чланке да бисте сазнали више -
- јКуери Еффецтс
- јКуери Метходс
- ЈКуери Атрибути
- Како инсталирати Јкуери?
- Топ 8 јКуери селектора са имплементацијом кода
- Водич за примере ЈКуери Прогресс Бар-а
- Водич за различите ЈаваСцрипт догађаје