События jQuery - 25 лучших событий JQuery - синтаксис и пример

Введение в jQuery Events

JQuery - одна из самых популярных и широко используемых библиотек javascript, которая разработана и предназначена для упрощения архитектуры DOM на основе HTML, то есть свойств объектной модели документа, таких как чтение, манипулирование и обход дерева. Другие свойства из jQueries, такие как обработка событий, Ajax, стилизация и CSS-анимация, также упрощены. Это бесплатная библиотека с открытым исходным кодом, которая обычно используется в 73% случаев. 10 миллионов веб-сайтов, которые используются сегодня. Основные функции Jquery включают свойства, основанные на элементах DOM, такие как селекторы, манипулирование и обход дерева, что делает работу с JQuery намного более интересной, простой и удобной.

Он используется для обеспечения очень простого и понятного интерфейса, который можно использовать для применения различных удивительных эффектов. Эти методы также позволяют быстро использовать и применять наиболее часто используемые функции и их эффекты наряду с минимальными настройками. Основные команды, такие как команды для показа и скрытия элементов, практически одинаковы, а остальные команды также находятся в той же категории, что и любой желающий увидеть их. В этом случае команда show () используется для отображения элементов в полностью обернутом виде, а комбинированная команда set и hide () используется для скрытия этих объектов.

Jquery сделан специально для того, чтобы отвечать на события, представленные на HTML-странице. События сами по себе являются действиями различных посетителей, на которые может ответить веб-страница. Другими словами, событие используется для того, чтобы слегка представить точный или точный момент, особенно что-то, что произошло. Это может включать такие сценарии, как наведение мыши на элемент, нажатие и выбор переключателя, а также нажатие на элемент. Термин «огонь» или термин «пожар» часто используется вместе с событием. Например, событие нажатия клавиши запускается или, как правило, называется «сработало», это происходит в основном в тот момент, когда вы нажимаете клавишу. Вот список наиболее распространенных и часто используемых событий DOM.

События мыши, такие как dblclick, mouseleave, mouseenter, click. Есть и другие события клавиатуры, такие как нажатие клавиш, нажатие клавиш и нажатие клавиш. Существуют другие формы событий, такие как изменение, отправка, размытие и фокусировка событий. Есть другие события, которые являются событиями Document или Window, такими как изменение размера, загрузка, прокрутка, выгрузка и т. Д. В Jquery большинство событий на основе DOM имеют соответствующий метод jquery. Поэтому, чтобы назначить новое событие всем существующим абзацам на странице, можно использовать приведенный ниже синтаксис.

События и синтаксис jQuery

Вот следующие события jQuery с синтаксисом, приведенным ниже

1. Нажмите ()

Это событие происходит всякий раз, когда элемент нажимается. Этот метод click () используется для запуска элемента clicked, также известного как событие click, которое используется для присоединения к функции всякий раз, когда происходит событие, связанное с кликом.

Синтаксис

$(selector).click()

Если вы хотите прикрепить функцию к этому событию клика,

$(selector).click(function)

Следующий шаг всегда сопровождается действием и триггером, который формирует фактическую работу и функционирование функции, и поэтому всякий раз, когда событие запускается, функция должна быть передана в событие.

пример

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

2. Dblclick ()

Этот метод используется для присоединения функции обработчика события к предоставленному элементу 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. warnDefault ()

Этот связанный с событием метод event.preventDefault () используется, чтобы остановить действие по умолчанию определенного элемента. Примеры этого сценария включают в себя:

Предотвращение отправки кнопки от отправки формы

Запретить доступ к ссылке на определенный URL.

Определенное событие, такое как event.preventDefault (), используется для проверки того, используется ли метод или функция protectDefault () для вызова события.

Синтаксис

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. отметка времени

Это свойство используется для возврата количества миллисекунд, прошедших с 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. hover ()

Этот метод наведения мыши используется для указания двух функций, используемых для запуска, когда указатель мыши находится над всеми выбранными элементами. Этот метод запускает события mouseleave и mouseenter. Если указана только одна функция, она будет запускаться как для событий mouseleave, так и для mouseenter.

Синтаксис

$(selector).hover(inFunction, outFunction)

пример

$("p").hover(function()(
$(this).css("background-color", "blank");
), function()(
$(this).css("background-color", "yellow");
));

17. Клавиша ()

Порядок событий, связанных с событием keydown:

• Keydown: используется, когда ключ находится на пути вниз.
• Нажатие клавиши: это происходит при нажатии клавиши клавиатуры
• Keyup: как следует из названия, это используется, когда нажата клавиша вверх.

Синтаксис

$(selector).keydown()

пример

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

18. нажатие клавиши ()

Порядок событий, связанных с событием нажатия клавиши:

• Keydown: используется, когда ключ находится на пути вниз.
• Нажатие клавиши: это происходит при нажатии клавиши клавиатуры
• Keyup: как следует из названия, это используется, когда нажата клавиша вверх.

Синтаксис

$(selector).keypress()

пример

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

19. keyup ()

Порядок событий, связанных с событием keyup:

• Keydown: используется, когда ключ находится на пути вниз.
• Нажатие клавиши: это происходит при нажатии клавиши клавиатуры
• Keyup: как следует из названия, это используется, когда нажата клавиша вверх.

Синтаксис

$(selector).keyup()

пример

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

20. Live ()

Этот метод live () или функция jquery используется для присоединения одного или нескольких основанных на событиях обработчиков, которые будут использоваться, в частности, для выбранных списков элементов, и он также определяет функцию, которая должна выполняться там, где происходят события. Все обработчики событий присоединяются с использованием метода live (), который будет работать как с текущими, так и с элементами FUTURE, основанными на сопоставлении элементов селектора, которые могут быть похожи на новый элемент, созданный сценарием. Метод die () можно использовать для уничтожения метода live ().

Синтаксис

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

пример

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

21. Load ()

Метод load используется для присоединения обработчика событий к событию на основе загрузки. Событие загрузки происходит всякий раз, когда указанное Это событие происходит и работает всякий раз, когда элементы, связанные с URL, такие как изображение, фрейм, сценарий, iframe и объект окна. Событие загрузки может запускаться или не срабатывать, и это зависит от браузера, даже если изображение кэшируется. Существует также метод AJAX, который является методом jquery, известным как load (), вызываемый зависит от параметров.

Синтаксис

$(selector).load(function)

пример

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

22. Моуздаун

Это событие происходит, только когда левая кнопка указателя мыши нажата над выбранным списком элемента. Метод или функция mousedown () используются для запуска этого события, которое присоединяет функцию и запускается всякий раз, когда происходит событие mousedown. Этот метод часто используется вместе с методом mouseup ().

Синтаксис

$(selector).mousedown()

пример

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

23. Выкл ()

Этот метод используется для удаления обработчика событий, который присоединен вместе с методом on (). Можно сказать, что это замена метода unbind (), метода die () и метода undelegate (). Этот метод используется для обеспечения большей согласованности API, и всегда рекомендуется использовать этот метод, так как он используется для упрощения базы кода Jquery.

Синтаксис

$(selector).off(event, selector, function(eventObj), map)

пример

$("button").click(function()(
$("p").off("click");
));

24. мышиный центр ()

Это событие происходит всякий раз, когда указатель мыши находится над указанным элементом и вводится, когда он запускает событие mouseenter или используется для присоединения функции, которую можно использовать для запуска всякий раз, когда происходит событие на основе mouseenter.

Синтаксис

$(selector).mouseenter()

пример

$("p").mouseenter(function()(
$("p").css("background-color", "black");
));

25. mouseleave ()

Это событие происходит всякий раз, когда указатель мыши находится над указанным элементом и уходит, когда он вызывает событие ухода мыши, или он используется для отключения функции, которая может использоваться для запуска всякий раз, когда происходит событие на основе указателя мыши.

Синтаксис

$(selector).mouseleave()

пример

$("p").mouseleave(function()(
$("p").css("background-color", "black");
));

Jquery - одна из наиболее часто используемых библиотек, когда дело доходит до разработки интерфейса. Это обеспечивает уникальные функции и широкий спектр функций, которые помогают сделать жизнь разработчиков и людей повсюду легкой и удобной. Надеюсь, вам понравилась наша статья. Оставайтесь с нами на нашем блоге, чтобы узнать больше о них.

Рекомендуемые статьи

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

1. jQuery Effects
2. Методы jQuery
3. Атрибуты jQuery
4. Как установить Jquery?
5. 8 лучших jQuery-селекторов с реализацией кода
6. Руководство по JQuery Progress Bar Примеры
7. Руководство по различным событиям JavaScript