What is "event monitoring"?

DOM allows us to write JS code to allow HTML elements to respond to events ;

events : interactions between users and web pages; eg: clicks on web pages;

monitoring : to allow the computer to detect that this event occurs at any time . Thereby executing some programs pre-written by programmers;

there are two main ways to set event listeners: onxxx and addEventListener() ;

the simplest way to set event listeners is

to set their onxxx attributes ;

oBox.onclick = function () {
    // When the box is clicked, the statement here will be executed}

Common mouse event monitoring

Common keyboard event monitoring

Common form event listening

Common page event monitoring

Event propagation

starts from the outside to the inside (capture phase) , and then from the inside to the outside (bubbling phase).

However, writing like onxxx (DOM level 0) can only monitor the bubbling phase ; so you need to use the addEventListener() method (DOM level 2);

oBox1.addEventListener ('click', function(){
    // This is the event processing function}, true) // true means listening to the capture phase, false means listening to the bubbling phase.

Note:

• The innermost element no longer distinguishes between the capturing and bubbling phases . The monitoring written in front will be executed first, and then Monitoring written after execution;
• if the same two or more events with the same name are set for an element, the ones written later in DOM0 level will overwrite the ones written first; while DOM2 level will be executed in order ;