jQuery event

jQuery event

---

jQuery is specially designed for event handling.

---

What is an event?

The response of a page to different visitors is called an event.

An event handler is a method that is called when something happens in HTML.

Instance:

• Move the mouse over the element.
• Select the option button
• Click on the element

The term "trigger" (or "fire") is often used in events such as "trigger keypress event when you press a keystroke".

Common DOM events:

Mouse event	Keyboard event	Form event	Document / window event
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

---

jQuery event method syntax

In jQuery, most DOM events have an equivalent jQuery method.

The page specifies a click event:

The next step is to define when to trigger the event. You can do this with an event function:

---

Common jQuery event methods

$(document).ready()

The $(document.ready() method allows us to execute functions when the document is fully loaded. This event method is already mentioned in the jQuery syntax section.

click()

Click() is a function that is called when a button click event is triggered.

The function is executed when the user clicks on the HTML element.

In the following example, when a click event is triggered on an element, the current element is hidden:

dblclick()

When an element is double-clicked, a dblclick event occurs.

The dblclick() method triggers a dblclick event, or specifies a function that runs when a dblclick event occurs:

mouseenter()

Mouseenter events occur when the mouse pointer passes through an element.

The mouseenter() method triggers the mouseenter event, or specifies a function that runs when a mouseenter event occurs:

mouseleave()

Mouseleave events occur when the mouse pointer leaves the element.

The mouseleave() method triggers a mouseleave event, or specifies a function that runs when a mouseleave event occurs:

mousedown()

The mousedown event occurs when the mouse pointer moves over the element and the mouse button is pressed.

The mousedown() method triggers a mousedown event, or specifies a function that runs when a mousedown event occurs:

mouseup()

The mouseup event occurs when the mouse button is released on the element.

The mouseup() method triggers a mouseup event, or specifies a function that runs when a mouseup event occurs:

hover()

The hover() method is used to simulate cursor hover events.

When the mouse moves over the element, the specified first function (mouseenter) is triggered; When the mouse moves out of this element, the specified second function (mouseleave) is triggered.

focus()

The focus event occurs when the element gets the focus.

When an element is selected with a mouse click or positioned by tab, the element gets focus.

The focus() method triggers a focus event, or specifies a function that runs when a focus event occurs:

blur()

The blur event occurs when the element loses focus.

The blur() method triggers a blur event, or specifies a function that runs when a blur event occurs:

---

Compare keypress, keydown, and keyup

• keydown: when a key is pressed on the keyboard, it is triggered constantly (except opera browser), which returns the keyboard code;
• Keypress: When a keystroke is pressed on the keyboard and a character is generated, the ASCII code is returned. N ote: Keystrokes such as shift, alt, ctrl do not produce characters, so listening is not valid, in other words, the keypress event is triggered only when a keystroke that outputs characters on the screen is pressed. Pressing a key all the time triggers constantly.
• Keyup: Triggered when the user releases a keystroke, returns the keyboard code as compared to keydown.