JavaScript allows websites to provide “feedback” on user actions and interactions, such as the DOM, events, and event handling:

Event handler

An event is an action performed by the user or the browser itself. For example, click, mouseup, keydown, mouseover is the name of the event.

** The function that responds to an event is called an event handler (event listener). The event handler starts with on, so the event handler for Click is onclick or addEventListener

JavaScript event queue

Javascript, in addition to the main thread, has a thing called a task queue, and when the main thread is finished, it goes to the queue to find the task, and of course if we don’t click, the task queue is empty, and when we click, addEventLister will put his function for the second parameter in the queue, Then the main javaScript thread suddenly finds something in the queue and runs off the stack

A “task queue” is a queue of events (also known as a message queue). When an IO device completes a task, it adds an event to the “task queue”, indicating that the related asynchronous task can be placed on the “execution stack”. The main thread reads the “task queue”, which is to read what events are in it.

In addition to the IO device events, the “task queue” includes some user-generated events (such as mouse clicks, page scrolling, and so on). As long as the callback function is specified, these events are queued up for the main thread to read.

Callbacks are code that is suspended by the main thread. Asynchronous tasks must specify a callback function, which is executed when the main thread starts executing an asynchronous task.

Whenever the main thread is empty, it reads the “task queue”, that’s how JavaScript works. The process repeats itself.

JavaScript event handling, which is when the UI has an action, just throws the event onto the JavaScript execution stack. UI interaction is not in the same thread as JavaScript execution.

For example, when we modify the DOM, the JavaScript code is executed synchronously, but the browser rearranges and redraws asynchronously.

DOM 0-level event listening

DOM 0-level event listener: Assigns a function to an event handler property

var btn2=document.getElementById('btn2'); Onclick =function(){}// Add an onclick attribute to btn2, which triggers an event handlerCopy the code

Event bubbling and event capture

  • The flow of events used in IE is an event bubble, which starts with concrete received elements and then progressively propagates up to non-concrete elements.

  • Netscapte uses event capture, in which non-specific elements receive events first and the most specific nodes receive them last.

In the DOM era, both are compatible

How do I stop bubbling?

There are the following ways to prevent bubbling:

  • e.cancelBubble=true;

  • e.stopPropagation();

  • return false;

Why are there no DOM 1 events

DOM level 1 became a W3C recommendation on October 1, 1998. Events are not defined in the Level 1 DOM standard, so there is no level 1 DOM event model. The level 2 DOM defines an event model in addition to some DOM-related operations. The event model under this standard is what we call the Level 2 DOM event model

DOM 2 level event handler

DOM 2-level events define two methods for specifying and deleting the actions of the event handler. AddEventListener () and removeEventListener ()

AddEventListener () and removeEventListener ()

In the DOM, addEventListener() and removeEventListener() are used to assign and remove event handlers. Unlike IE, these methods take three arguments:

  • Event name (e.g. Click)

  • Function to allocate (the first argument Event object represents the state of the Event)

  • Whether the handler is used for the bubble phase (false) or capture phase (true), the default is bubble phase False

[object].addEventListener(“name_of_event”,fnhander,bcapture)

[object].removeEventListener(“name_of_event”,fnhander,bcapture)

oDiv.addEventListener("onclick", fnClick, false); // Add event handler odiv. addEventListener("onclick", fnClickAnother, false); // Like IE, you can add multiple event handlers odiv.removeEventListener ("onclick", fnClick, false); // Remove the event handlerCopy the code

If you use addEventListener() to add an event handler to the capture phase, you must specify the capture phase in removeEventListener() to remove the event handler correctly

oDiv.onclick = fnClick; oDiv.onclick = fnClickAnother; Odiv. onclick = fnClick; // With direct assignment, subsequent event handlers override the previous handler odiv. onclick = fnClick; oDiv.addEventListener("onclick", fnClickAnother, false); // Calls are made sequentially, without overwritingCopy the code

Window object method

Reference article:

JavaScript running mechanism a: talk about the Event Loop www.ruanyifeng.com/blog/2014/1…

JS — — — — — — — levels DOM0 event handling and DOM2 event processing — — — — — — — simple notation www.cnblogs.com/holyson/p/3…

ECMAScript, BOM, DOM (core, browser object model and the document object model (DOM) www.cnblogs.com/best/p/8028…

JavaScript learning summary (3) the BOM and the DOM, rounding segmentfault.com/a/119000000…

Reprint the home station article talk about BOM and DOM (4) : DOM0 / DOM2 event handling analysis “, please indicate the source: www.zhoulujun.cn/html/webfro…