Basic knowledge about interaction between JavaScript and HTML

This article will introduce the interaction between JavaScript and HTML. If you have any need, you can refer to the interaction between JavaScript and HTML through events. JavaScript uses an asynchronous event-driven programming model. When a document, browser, element, or related object occurs, the browser generates an event. If JavaScript focuses on specific types of events, it can register the handle to be called when such events occur.

Event stream

The event stream describes the sequence of events received from the page. For example, if there are two nested p S and the inner p is clicked, is the inner p starting the click event first or the outer layer triggering first? There are currently three main models

IE event bubbling: the event is received by the most specific element at the beginning, and then spread to a more specific element step by step.

Event capture in Netscape: events are received earlier on a node that is not specific, and events are received at the end of the most specific element, which is opposite to event bubbles.

DOM event stream: DOM2-level events stipulate that the event stream consists of three phases: Event capture stage, which is in the target stage and event bubble stage. Event capture occurs first, which provides an opportunity to intercept events, then the actual target receives the event, and finally the bubble sentence stage.

Opera, Firefox, Chrome, and Safari all support DOM Event streams. IE does not support event streams, but only supports event bubbles.

If you have the following html, click p.

The Code is as follows:

Test Page

Click Here

Event handler)

We also call it an event listener (listener). An event is an action performed by a user or a browser. For example, click, load, moseover, and so on are all event types (commonly known as event names). The method to respond to an event is called an event handler, event listener, or event handle, the name of the event handler is on + event type.

After learning about this, let's see how to add an event handler to the element.

Each event supported by the HTML event handler element can be specified using an HTML attribute with the same name as the corresponding event handler. The value of this attribute should be executable JavaScript code. We can add a click event handler for a button.

The Code is as follows:

The HTML event handler can contain the specific action to be executed, or call the script defined elsewhere on the page. The preceding example can be written as follows:

The Code is as follows: