JQuery Events - Топ-25 подій JQuery - синтаксис та приклад

Вступ до подій jQuery

JQuery - одна з найпопулярніших і широко використовуваних бібліотек javascript, яка розроблена і розроблена для спрощення архітектури DOM на основі HTML, тобто властивостей моделі об'єкта документа, таких як читання, маніпуляції та обхід дерева. Інші властивості jQueries, такі як обробка подіями, Ajax, стилізація та анімація CSS, також спрощені. Це відкритий і безкоштовна бібліотека, яка зазвичай використовується в 73% від прибл. 10 мільйонів веб-сайтів, які використовуються сьогодні. Основні особливості Jquery включають властивості на основі елементів DOM, такі як селектори, маніпуляції та обхід дерева, що робить роботу над JQuery набагато цікавішою, простішою та зручнішою.

Він використовується для надання дуже простого та зрозумілого інтерфейсу, який можна використовувати для застосування різних видів дивовижних ефектів. Ці методи також дозволяють швидко використовувати та застосовувати найбільш часто використовувані функції та їх ефекти, а також голі до мінімальних конфігурацій. Основні команди, такі як ті, які показують та приховують елементи, майже однакові, а інші інші також лежать у тій же категорії, що очікували б усі, хто бажає їх бачити. Команда show () у цьому випадку використовується для показу елементів у повністю загорнутій, а для приховування цих функцій використовується команда set та hid ().

Jquery - це індивідуально, який використовується для реагування на події, що містяться на HTML-сторінці. Самі події - це різні дії відвідувачів, на які може реагувати веб-сторінка. Іншими словами, подія використовується для того, щоб трохи представити точний або точний момент, особливо щось, що сталося. Сюди можна віднести такі сценарії, як переміщення миші по елементу, натискання та вибір перемикача, а також натискання на елемент. Термін пожежі або термін звільнений багато разів використовується разом із подією. Наприклад, подія натискання клавіші спрацьовує або більш популярно називається запускається, це в основному в момент натискання клавіші. Ось список найпоширеніших і часто використовуваних подій DOM.

Події миші, такі як dblclick, mouseleave, mouseenter, click. Також є деякі інші події на клавіатурі, такі як клавіша клавіш, клавіатура та клавіатура. Існують і інші форми подій, такі як зміни, подання, розмивання та фокусування подій. Є й інші події, такі як події Document або Window, такі як розмір, завантаження, прокручування, вивантаження тощо. У Jquery більшість подій на основі DOM мають відповідний метод jquery. Отже, щоб призначити нову подію всім існуючим параграфам на сторінці, нижченаведений синтаксис можна використовувати.

Події та синтаксис jQuery

Ось такі події jQuery із синтаксисом, наведеними нижче

1. Клацніть ()

Ця подія відбувається щоразу, коли елемент клацається. Цей метод click () використовується для запуску клацнутого елемента, також відомого як подія клацання, який використовується для приєднання до функції, коли відбувається подія, пов’язана з натисканням.

Синтаксис

$(selector).click()

Якщо ви бажаєте приєднати функцію до цієї події, натисніть

$(selector).click(function)

Наступний крок завжди відбувається разом із дією та тригером, який формує фактичну роботу та функціонування функції, і тому, коли подія звільняється, функція повинна передаватися події.

Приклад

$("p").click(function()(
// action which is triggered goes here!! ));

2. Dblclick ()

Цей метод використовується для приєднання функції наданого елемента обробки HTML до наданого елемента HTML. Ця функція виконується щоразу, коли користувач подвійно натискає на даний елемент HTML.

Синтаксис

$(selector).dblclick()

Приклад

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

3. змінити ()

Ця подія відбувається щоразу, коли значення певного елемента змінюється, тобто воно працює лише для введення, текстової області та вибраних елементів. Метод change () використовується для запуску події зміни або тієї, яка приєднується до функції, коли має відбутися подія, пов’язана зі зміною.

Синтаксис

$(selector).change()

Приклад

$("input").change(function()(
alert("This text related to this has been changed.");
));

4. розмиття ()

Ця подія, пов'язана з розмиттям, виникає лише тоді, коли елемент втрачає фокус. Метод blur (), який використовується для ініціювання події розмиття, або той, який використовується для приєднання функції, яку потрібно запустити, коли відбувається подія розмиття. Цей метод використовується часто з методом focus ().

Синтаксис

$(selector).blur()

Приклад

$("input").blur(function()(
alert("The field has lost its focus.");
));

5. дані

Це властивість event.data використовується, щоб містити необов'язкові передані дані, пов'язані з методом події, коли обробник виконавця для поточного зв'язку пов'язаний.

Синтаксис

event.data

Приклад

$("p").each(function(i)(
$(this).on("click", (x:i), function(event)(
alert("This index + ". paragraph has data: " + event.data.x);
));
));

6. простір імен

Це властивість використовується для повернення користувацького простору імен кожного разу, коли подія запускається. Властивість використовується для встановлення авторів плагінів, які можна використовувати для вирішення завдань дуже по-різному, що залежить від використовуваного простору імен. Простори імен, які починаються з підкреслення, є зарезервованими просторами імен для JQuery.

Синтаксис

event.namespace

Приклад

$("p").on("custom.someNamespace", function(event)(
alert(event.namespace);
));

7. PageX

Це властивість типу сторінки, яка використовується для повернення положення вказівника миші, яке пов'язане з лівим боковим краєм документа. Цей вид власності часто використовується разом із подією. Властивість PageY.

Синтаксис

event.PageX

Приклад

$(document).mousemove(function(event)(
$("span text ").text("X: " + event.pageX);
));

8. PageY

Це властивість типу сторінки, яка використовується для повернення положення вказівника миші, яке пов'язане з верхньою стороною краю документа. Цей вид власності часто використовується разом із подією. Властивість PageX.

Синтаксис

event.PageY

Приклад

$(document).mousemove(function(event)(
$("span text ").text("Y: " + event.pageY);
));

9. результат

Властивість event.result використовується для того, щоб містити попереднє або останнє значення, яке повертається обробником подій, яке спеціально запускається конкретною подією.

Синтаксис

event.result

Приклад

$("button").click(function()(
return "Hi there!";
));

10. prevenDefault ()

Цей метод, пов’язаний з подією.preventDefault () використовується для того, щоб зупинити дії конкретного елемента за замовчуванням. Приклади цього сценарію включають:

Запобігання кнопці подання від подання форми

Забороніть доступ до певної URL-адреси посилання.

Конкретна подія, наприклад event.preventDefault (), використовується для перевірки, чи використовується метод або функція prevenDefault () для виклику події.

Синтаксис

event.preventDefault()

Приклад

$("a").click(function(event)(
event.preventDefault();
));

11. Event.target ()

Це властивість використовується для повернення, який елемент DOM повинен викликати цю подію. Найчастіше корисно порівнювати ціль event.target з цим, щоб визначити, чи обробляється конкретна подія через подію, яку називають кипучою.

Синтаксис

event.target

Приклад

$("p, button, h2").click(function(event)(
$("div").html("Hi, triggered is " + event.target.NameNode + " new element.");
));

12. timeStamp

Це властивість використовується для повернення кількості мілісекунд з часу 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. фокус ()

Ця властивість та фокус цієї події виникає, коли елемент використовується для отримання фокусу, який виникає, коли він обраний клацанням миші або переміщенням вкладки на нього. Метод focus () використовується для ініціювання події фокусування або приєднання функції, яка запускається, коли відбувається подія, пов’язана з фокусом.

Синтаксис

$(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. keyup ()

Порядок подій, пов’язаних із подією на клавіатуру, є:

• Клавіш: Це використовується, коли ключ знаходиться вниз.
• Клавіша клавіші : це відбувається при натисканні клавіші клавіатури
• Клавіатура: як випливає з назви, це використовується при натисканні клавіші верхньої сторони.

Синтаксис

$(selector).keyup()

Приклад

$("input").keyup(function()(
$("input").css("background-color", "black");
));

20. Live ()

Цей метод life () або функція jquery використовується для приєднання одного або декількох обробників на основі подій, які будуть використовуватися, зокрема, для вибраних списків елементів, а також визначає функцію, яку слід запускати там, де відбуваються події. Всі обробники подій додаються за допомогою методу live (), який буде працювати як для поточних, так і для БУДЬЧИХ елементів, заснованих на відповідності елементів вибору, які можуть бути як новий елемент, створений сценарієм. Метод die () може бути використаний для знищення методу live ().

Синтаксис

$(selector).live(event, data, function)

Приклад

$("button").live("click", function()(
$("p").slideToggle();
));

21. Завантажити ()

Метод навантаження використовується для приєднання обробника події до події на основі навантаження. Подія завантаження відбувається щоразу, коли вказана Ця подія відбувається і працює, коли елементи, пов'язані з URL-адресою, такими як зображення, фрейм, сценарій, рамка і об'єкт вікна. Подія завантаження може або не може спрацювати, і це залежить від браузера, навіть якщо зображення є кешованим. Існує також AJAX метод, який є методом jquery, відомим як load (), той, що викликається, залежить від параметрів.

Синтаксис

$(selector).load(function)

Приклад

$("img").load(function()(
alert("stuff loaded.");
));

22. Mousedown

Ця подія відбувається лише тоді, коли ліва кнопка вказівника миші натискається на вибраний список елемента. Метод або функція mousedown () використовується для запуску цієї події, яка приєднує функцію, і вона запускається, коли трапляється подія mousedown. Цей метод часто використовується разом із методом mouseup ().

Синтаксис

$(selector).mousedown()

Приклад

$("div").mousedown(function()(
$(this).after("Down button pressed with mouse.");
));

23. Вимкнено ()

Цей метод використовується для видалення обробника подій, який додається разом із методом on (). Можна сказати, що це заміна методу unndind (), die () і undelegate (). Цей метод використовується для приведення великої послідовності в API, і завжди рекомендується використовувати цей метод, оскільки він використовується для спрощення бази коду Jquery.

Синтаксис

$(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");
));

Jquery - одна з найбільш використовуваних бібліотек, коли мова йде про передовий розвиток. Це забезпечує унікальні функції та широкий спектр функцій, що допомагає зробити життя розробників та людей навколо всього легким та зручним. Сподіваюся, вам сподобалась наша стаття. Слідкуйте за нашим блогом, щоб отримати більше подібних.

Рекомендовані статті

Це посібник із подій jQuery. Тут ми обговорюємо список найпоширеніших і часто використовуваних різних подій jQuery із синтаксисом та прикладами. Ви також можете переглянути наступні статті, щоб дізнатися більше -

1. Ефекти jQuery
2. Методи jQuery
3. Атрибути jQuery
4. Як встановити Jquery?
5. 8 найкращих селекторів jQuery з реалізацією коду
6. Посібник з прикладів панелі просування JQuery
7. Посібник з різних подій JavaScript