Briefly talk about event monitoring in JavaScript

WBOY

Release： 2022-06-23 11:59:56

forward

2345 people have browsed it

This article brings you relevant knowledge about javascript, which mainly organizes issues related to event monitoring, including what is event monitoring, how to set up event monitoring, etc., as follows Let's take a look, I hope it will be helpful to everyone.

Briefly talk about event monitoring in JavaScript

[Related recommendations: javascript video tutorial, web front-end]

What is "event listening"

DOM allows us to write JS code to let HTML elements react to events;

Event: the interaction between the user and the web page;eg : Click on the web page;

Monitoring: It is to allow the computer to detect that this event has occurred at any time, so as to execute some programs pre-written by the programmer;

There are two main ways to set up event listening: onxxx and addEventListener();

The simplest way to set up event listening

Set their onxxx Properties;

oBox.onclick = function () {
    // 点击盒子时，将执行这里的语句
}

Copy after login

Common mouse event monitoring

Event name	Event description
onclick	When the mouse single-clicks an object
ondblclick	When the mouse double-clicks an object
onmousedown	When a mouse button is pressed on an object
onmouseup	When When a mouse button is released on an object
onmousemove	When a mouse button is moved on an object
onmouseenter	When the mouse enters an object (similar event onmouseover)
onmouseleave	When the mouse leaves an object (similar event onmouseover) Event onmouseout)

Common keyboard event monitoring

##onkeyup When a keyboard key is released

Event name	Event description
onkeypress	When a keyboard key is pressed (system buttons such as arrow keys and function keys are not recognized)
onkeydown	When a keyboard key is pressed (the system button can be recognized and will occur before onkeypress)

Common form event monitoring

Event nameEvent descriptionWhen the user changes the content of a form field will be triggered when onfocusWhen an element gets focus (such as tab key or mouse click)##onblur##onsubmitWhen the form is submittedonresetWhen the form is resetCommon page event monitoring


onchange

When an element loses focus

Event name Event descriptiononloadWhen the page or image is finished loadingonunloadWhen the user exits the pagePropagation of events

First from the outside to the inside

(capture phase), and then from the inside to the outside (bubbling stage) And, onxxx is written like this (DOM level 0),

Can only monitor the bubbling phase; so you need to use the addEventListener() method (DOM2 level);

oBox1.addEventListener('click', function(){
    // 这是事件处理函数
}, true)  // true表示监听捕获阶段，false表示监听冒泡阶段

Copy after login

Notes

The inner elements no longer distinguish between the capture and bubbling stages

. The listeners written in the front will be executed first, and then the monitors written later will be executed;If you set the same two or more events with the same name for an element, the DOM level 0 writing methodThe ones written later will overwrite the ones written first; while the DOM level 2 will be written in order. Execute
;[Related recommendations: javascript video tutorial,

]

The above is the detailed content of Briefly talk about event monitoring in JavaScript. For more information, please follow other related articles on the PHP Chinese website!