Event monitoring in the words JS

1, the concept of event monitoring:

JavaScript gives us the ability to create dynamic pages, and every element in the Web page can produce certain events that trigger JavaScript functions. We can think of an event as an act or a method.

Events are classified as DOM 0-level events and Dom 2-level events, and DOM2-level events are also known as event snooping. The disadvantage of a DOM0-level event is that if the event is the same, the event of the latter overrides the former event, and the DOM2 event is not overwritten, it can add several different listener functions for the same event as the current object. These functions are triggered by the order in which they are added, which is triggered first. You can also specify at which stage (capture stage or bubbling stage) The listener function is triggered.

2. Event Flow:

The event flow is mainly divided into bubble type event and capture type event. Internet Explorer currently supports only bubbling events, and browsers that support standard DOM, such as Firefox, Chrome, and so on, are supported.

Capture process: Window------> Document------->body---------> div

Bubbling process: div-------->body--------->document----------> Window

3, the main browser to listen to the event method:

AddEventListener () Parameter 1: Event type does not need to be added on parameter 2: callback function Parameter 3: Boolean true means capture false represents bubbling below is an example.

In the above code, the button node's addEventListener method binds click to the listener function of the event hello , which is triggered only during the bubbling phase.

RemoveEventListener () to remove addEventListenermethod to add an event listener function 4.IE with the Listener event method: attachevent () Parameter 1: Event type needs to be added on parameter 2: callback function for example:

Unbind Event Method: DetachEvent () Note here: The type of event to be unbound and the name of the event listener function must correspond to each other in order to successfully unbind. The 5.this points to the inside of the listener function. thisPoint to the element node that triggered the event. These three kinds of writing click button will be output btn。 6, event agent because the event will propagate up to the parent node in the bubbling phase, so the listener function of the node can be defined on the parent node, and the listener function of the parent node handles the events of multiple child elements uniformly. This method is called the agent of the event. For example: In the above code, clickThe listener function of the event is defined in theolistnode, but in fact, it handles child nodes <input>Of clickEvent. The advantage of this is that as long as you define a listener function, you can handle the events of multiple child nodes without having to <input>The listener function is defined on the node. And then add the child nodes later, the listener function is still valid. 7, if you want the event to a node, no longer propagate, you can use the event object's stopPropagationMethod. In the above code, stopPropagationThe method prevents the propagation of the event in the capture and bubbling stages, respectively.

Event monitoring in the words JS