JavaScript events in a detailed

Event Flow

Describes the order in which events are received in a page

Event bubbling

Nodes that are received by the most specific element and then propagate up to the least specific element (document)

Event capture

The least specific node receives the event first, and the most specific node should be the last to receive the event

Event handling

HTML event Handling: Added directly to the HTML structure

DOM Level 0 Event handling: Assigning a function to an event handler property "will be overwritten"

The results will show 17 rows of results, and the previous lines of events will be overwritten. 18 line is the empty event.

DOM Level 2 event handling:

AddEventListener ("Event name", "event handler", "Boolean value")

True: Event Capture

False: Event bubbling

RemoveEventListener ()

Now, the Boolean value is no longer operational.

　　

The result is demo1, which Demo3,demo4 executes sequentially and is not overwritten. The Demo2 is removed and will not be executed.

　　

Not all browsers can handle 0-and 2-level events.

IE Event handlers

Attachevent

DetachEvent

Level 0 is more troublesome and will be overwritten.

Event Object

An object is generated when a DOM event is triggered

Events Object Event

1, type: Get event Type

2. Target: Get the event target

3. Stoppropagation (): Block event bubbling

4. Preventdefault (): Block event default behavior

JavaScript events in a detailed