Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the event knowledge points of Web". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what are the event knowledge points of Web"?

Events in web

Events are not the core part of JavaScript; they are defined in the browser's Web Api. All of the cases listed below belong to events that have occurred.

The user clicks the mouse or hovers the cursor over an element.

The user presses a key in the keyboard.

The user resizes or closes the browser window.

A web page stops loading.

Submit the form.

Play, pause, and close the video.

An error has occurred.

We can use event handlers in our code to handle various events.

Event model

Suppose we have a piece of html code like this:

Shady Grove Aeolain Over the River, Charile Dorian

If we click over the Rive, Charile, the whole event flow is as follows:

The event goes through three stages, which are marked in red, blue and green in the picture above. The first stage is red, and the event flow goes all the way from the root element to the target element of the click, a process called capture. The second stage is blue. In this phase, the click event is processed, various attributes are added to the event, and so on. The third stage is green, and the event goes back to the root element, a process called bubbling. Throughout the event flow, we can listen to the event on any element that the event flow passes through and process it.

It is generally recommended to handle events in the bubbling phase, so as to maximize compatibility with a variety of browsers.

Note: blur, focus, load, unload and other events will not bubble.

The reason is that these events occur only on themselves, and events on any of its parent nodes do not occur, so they do not bubble.

We can look at the bubbles property of the event to determine whether the event can bubble.

Event handling

EventTarget

EventTarget is an interface implemented by objects that can receive events, and listeners can be created for them. All event handlers in Web are "provided" by EventTarget.

AddEventListener

This method registers the specified listener with EventTarget, and when the object triggers the specified event, the specified callback function is executed. The event target can be the elements Element,Document and Window on a document or any other object that supports the event (such as XMLHttpRequest). The standard syntax is as follows:

Target.addEventListener (type, listener [, options])

Target.addEventListener (type, listener [, useCapture])

Target.addEventListener (type, listener [, options]); target.addEventListener (type, listener [, useCapture]); Preview

Type: string. Represents the event type, for example: click.

Listener: function. The callback function when the event is triggered. This function accepts an Event event object. This Event event object contains the following important properties and methods (only the commonly used ones are listed here)

Options: object. Specify a configuration parameter for listener.

UseCapture: Boolean value, optional. The default is false, and the event triggers listener during bubbling.

RemoveEventListener

Delete events that are registered to target using addEventListener. Standard syntax:

Target.removeEventListener (type, listener [, options]); target.removeEventListener (type, listener [, useCapture])

In order to improve the performance of the page, we can remove the previously registered event listener function when we finish processing an event and no longer have to listen to the event. It is important to note that if the event is registered and monitored during the capture or bubbling phase, the removal needs to be removed separately.

The difference between currentTarget and target

We often use these two properties of the event in the event handler. CurrentTarget represents the object that the registrar is listening to. Target represents the object from which the event originated. For example:

Child1 child2 child3document.getElementById ('father') .addeventListener (' click', function (e) {console.log (e.currentTarget); console.log (e.target);})

We bind the event handler to father. Now, if we click on child1, because child1 is the event source, then e.target is child1. Our event handler is bound to father, so e.currentTarget is father.

This requires special attention in the development process.

Event agent

This concept depends on the fact that if you want to run a piece of code by clicking on any of a large number of child elements, you can set the event listener on its parent node and set the impact of the event listener bubble to each child node, rather than each child setting the event listener separately. For example:

1 2 3 4 5 6 7 8 9

When we click on each li, we output the corresponding number in the li. Of course, we can bind an event directly to all the li. But this will result in a waste of memory. We can bind only one event to the ul, get the current clicked li according to the target of the event, and get the corresponding number in the li.

Document.querySelector ('ul') .addEventListener (' click', function (e) {if (e.target & & e.target.nodeName = "LI") {console.log (e.target [XSS _ clean]);}})

Custom event

The latest DOM standard allows us to customize events. Look directly at the following example.

Var fakeNode = document.createElement ('Coy'); / / create a custom element var evt = document.createEvent (' Event'); / / create a custom event var evtType = 'test'; / / Custom event type / / event listener function fakeNode.addEventListener (evtType, function (e) {console.log (e); / / e.type =' test';}, false); / / initialize the event. / / initEvent usage: event.initEvent (type, bubbles, cancelable); evt.initEvent (evtType, false, false); / / send evt event fakeNode.dispatchEvent (evt) to fakeNode. At this point, I believe you have a deeper understanding of "what are the event knowledge points of Web?" Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.