jQuery events

What is an event?

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

Event handlers refer to methods that are called when certain events occur in HTML.

Example:

• Move the mouse on the element.

• Select the radio button

• Click on the element

The term "trigger" is often used in events "(or "fire") For example: "The keypress event fires when you press a key."

Common DOM events:

Event	Description
click	This event is triggered when the mouse is clicked
keypress	Triggered when a key on the keyboard is pressed and released again
submit	Triggers when the form is submitted
load	Triggers when the page is loaded
dblclick	Double click of the mouse is triggered
keydown	Triggered when a key on the keyboard is pressed
change	Triggered when the current element loses focus and the element content changes
resize	Triggered when the browser window size is changed
mouseenter	Add/trigger mouseenter event
keyup	Triggered when a key on the keyboard is pressed and then released
focus	Triggered when an element loses focus
scroll	Add/trigger scroll event
mouseleave	Add/trigger mouseleave event
blur	Add/trigger blur event

---

jQuery event method syntax

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

Specify a click event on the page:

$("p").click();

The next step is to define when the event is triggered . You can achieve this through an event function:

$("p").click(function(){
// Code executed after the action is triggered!!
});

---

Commonly used jQuery event methods

$(document).ready()## The

#$(document).ready() method allows us to execute a function after the document has completely loaded. This event method has been mentioned in the jQuery Syntax chapter.

click()

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

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

In the following example, when a click event is triggered on a

element, the current

element is hidden:

       
  
如果你点我，我就会消失。
 
点我消失!
 
点我也消失!
  

Run the program to try it

---

dblclick()

The dblclick event occurs when an element is double-clicked.

The dblclick() method triggers the dblclick event, or specifies a function to be run when a dblclick event occurs:

       
  
双击鼠标左键的，我就消失。
 
双击我消失！
 
双击我也消失！
  

Run the program to try it

---

mouseenter()

The mouseenter event occurs when the mouse pointer passes through an element.

The mouseenter() method triggers the mouseenter event, or specifies the function to be run when the mouseenter event occurs:

       
  
鼠标指针进入此处，会看到弹窗。
  

Run the program to try it

---

mousedown()

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

The mousedown() method triggers the mousedown event, or specifies the function to be run when the mousedown event occurs:

       
  
这是一个段落
  

Run the program to try it

---

hover()

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

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

      
  
这是一个段落。
  

Run the program and try it

---

focus()

The focus event occurs when an element gains focus.

When an element is selected by mouse click or positioned by tab key, the element will gain focus.

The focus() method triggers the focus event, or specifies the function to be run when the focus event occurs:

       
  Name: 
 Email:   

Run the program to try it

---

If you are interested, you can try it Other events