The latest summary of common JavaScript DOM events!

This article summarizes the common events of JS DOM for everyone, which has certain reference value. Interested friends can refer to it.

1 Summary of common events

1.1 Mouse events

click click dblclick double-click contextmenu right-click mouseover the mouse is hovering on the element, it is recommended to use mouseenter instead of mouseout the mouse leaves the element, it is recommended to use mouseleave instead of mouseenter the mouse is hovering over the element mouseleave the mouse leaves the element mousedown mouse button press mouseup mouse button lift mousemove mouse movement

1.2 Keyboard events

keydown keyboard button pressed keyup keyboard button raised keypress keyboard button pressed, used to enter character keys

1. Which elements can listen to keyboard events?

① document

② Elements that can get focus (form controls, especially input elements)

2. What is the difference between keydown and keypress?

① keydown can be triggered by pressing all keys, and it cannot distinguish between uppercase and lowercase keys.

② keypress can only be triggered when the key that can input characters is pressed, and the keys can be case-sensitive.

3. How to get which button was pressed?

Use the attributes in the event object:

• evnet.keyCode gets the ascii value corresponding to the key

• event.which is the same as keyCode

• event.key gets the character value of the key.

1.3 The document event

load will be triggered when everything in the page is loaded. You can listen to the window or body element. DOMContentLoaded will be triggered when all the elements in the page are loaded. You can listen to the window or document. You can only use addEventListener to listen to the event beforeunload.

is triggered when the web page is closed

:

① The load event is triggered only after everything in the page is loaded, including elements and external resources.

② The DOMContentLoaded event can be triggered when all elements in the page are loaded, excluding external resources.

1.4 The form event

submit is triggered when the form is submitted. This event listens to the form element.	
reset is triggered when the form is reset. This event listens to the form element. focus is triggered when the form control gains focus. blur is triggered when the form control loses focus. select. The content in the input box or text field is selected. change For the input box, It will only be triggered when the content changes and the focus is lost; suitable for select

1.5 image event

load image file download completed error image loading failure

1.6 other events

resize monitors the window and the viewport size changes scroll monitors the window or elements with scroll bodies , triggered when the content in the page or element is scrolled.

2 Event Object

2.1 Obtaining the Event Object

Set the first formal parameter to the callback function of the event to obtain the event object.

Different types of events obtain different types of Event objects.

2.2 Properties and methods of the mouse event object MouseEvent

offsetX / offsetY Get the coordinate position of the mouse on the target element clientX / clientY Get the coordinate position of the mouse on the viewport pageX / pageY Get the coordinate position of the mouse on the page screenX / screenY Get the coordinate position of the mouse on the screen The coordinate position button on the button gets which mouse button was pressed, 0: left button; 1: middle button; 2: right button

2.3 Properties and methods of the keyboard event object KeyBorardEvent

keyCode gets the code value corresponding to the button which is the same as keyCode
key Gets the character value corresponding to the key

2.4 Properties and methods common to all types of event objects

type Gets the event name timeStamp Gets the number of milliseconds from when the event is triggered target Gets the target element stopPropagation() Prevents the event from bubbling preventDefault() Blocks Browser default behavior

2.5 prevents event bubbling

by executing event.stopPropagation() in the callback function of the event to prevent bubbling.

2.6 The default behavior of the browser

① What are the default behaviors of the browser?

Clicking on the hyperlink to submit and reset the jump form, right-clicking to pop up the system menu, etc...

② To prevent the browser's default behavior,

call event.preventDefault() in the callback function of the event. to prevent the default behavior.

Note: If you use the second method to listen to events, return false in the callback function can also prevent the default behavior.

3 The event delegate

event listens to the ancestor element, determines the target element, and performs relevant operations if the target element meets the conditions.

Advantages of event delegation:

• For listening to the same event on a large number of elements, using event delegation is more efficient than traversing and listening one by one.

• Using event delegation allows new elements to respond to events.

Related recommendations: [JavaScript video tutorial]

The above is the latest summary of common JavaScript DOM events! For more details, please pay attention to other related articles on the php Chinese website!