The best jQuery Event Tutorial In 2024, In this tutorial you can learn What is the event?,jQuery event method syntax,Commonly used jQuery event method,Examples,Examples,Examples,Examples,Examples,Examples,Examples,Examples,Examples,
jQuery is specially designed for the event handler.
Page response to different visitors called events.
Event handler method means that when certain events occur HTML when invoked.
Example:
The term is often used in the event "trigger" (or "excitation"), for example: "trigger keypress event when you press the keys."
Common DOM events:
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload |
In jQuery, most DOM events have an equivalent of jQuery methods.
Page, specify a click event:
The next step is to define what time trigger events. You can implement an event function:
$ (document) .ready ()
$ (Document) .ready () method allows us to fully load the document after the function execution. The event method in jQuery syntax section has been mentioned.
click ()
click () method when the button click event is triggered calls a function.
This function is executed when the user clicks on an HTML element.
In the following example, when you click on an event-triggered <p> element to hide the current <p> element:
dblclick ()
When you double-click the element, dblclick event occurs.
dblclick () method dblclick trigger event, or a predetermined function to run when the event occurs dblclick:
mouseenter ()
When the mouse pointer across the element, mouseenter event occurs.
mouseenter () method mouseenter trigger event, or a predetermined function to run when the event occurs mouseenter:
mouseleave ()
When the mouse pointer leaves the element, mouseleave event occurs.
mouseleave () method mouseleave trigger event, or when a predetermined function to run when the event occurs mouseleave:
mousedown ()
When the mouse pointer moves over the element and pressing the mouse button, mousedown event occurs.
mousedown () method triggers the mousedown event or function specified when running mousedown event occurs:
mouseup ()
When the mouse button is released over an element, mouseup event occurs.
mouseup () method mouseup trigger event, or a predetermined function to run when the event occurs mouseup:
hover ()
hover () method is used to simulate the cursor hovers over the event.
When the mouse moves to the elements, it will trigger the first specified function (mouseenter); when the mouse moves off of the element, it will trigger the second specified function (mouseleave).
focus ()
When the element gets focus, focus events occur.
When a mouse click on the selected element or elements by targeting tab key, the element will be the focus.
focus () method triggers the focus event, or a predetermined function to run when the event occurs focus:
blur ()
When the element loses focus, blur event occurs.
blur () method triggers the blur event or function to run when a predetermined event occurs blur: