Event flow and dom2 level event binding

Time:2019-10-20

The event process is divided into three stages: capture stage, target stage and bubbling stage.

Capture phase: events are executed from the top-level elements, layer by layer down to the precise elements.

Target phase: the event executes on the exact element.

Bubbling stage: events are executed from the precise elements, layer by layer, up to the top-level elements (Note: the top-level element of advanced browser is window, and the top-level element of browser below IE8 is document)

 

DOM Level 2 event binding method
Advanced browser binding method:
Element. Addeventlistener (type, @ handler, @ Boolean); / / binding
Type event type string without on
Handler event handler
Boolean Boolean if the value is true, the binding is bound to the capture stage. Otherwise, it is bound to the bubble stage.
Element. Removeeventlistener (type,; handler,; Boolean); / / remove binding
Type event type string without on
Handler event handler
Boolean Boolean if the value is true, the capture phase is removed; otherwise, the bubble phase is removed.

IE8 the following browser binding methods(addeventlistener is not supported)
Element. Attachevent (type, @ handler) / / binding
Type event type string with on
Handler event handler
Element. Detachevent (type, @ handler) / / remove binding
Type event type string with on
Handler event handler
(Note: the following browser binding methods in IE8 do not have a third parameter, which means that they cannot be bound to the capture stage)
 
Dom2 level events can be bound repeatedly, and the execution order in advanced browser is from top to bottom. In the browser below IE8, it is a reverse execution, but when attachevent and dom0 are executed together, it will execute level 0 first, and then reverse execution.

 

Recommended Today

Single and multiple buttons are styled with pictures

I’ve always seen people asking how to style and enlarge the buttons of radio buttons and multi buttons? Let’s share an example I did. 1. First make the button into a picture  2.html page Copy code The code is as follows: <!DOCTYPE HTML> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <script type=”text/javascript” src=”jquery-1.10.2.min.js”></script> <script type=”text/javascript”> […]