Event object learning

One . What is an event object

Official explanation : event Object represents the state of the event , For example, the state of keyboard keys 、 Mouse position 、 Mouse button status .
Simple understanding ∶ After the event , A collection of information data related to an event Put them all in this object , This object is It's the object of the event event, It has many properties and methods .

  Event object compatibility scheme

There is a compatibility problem with the acquisition of the event object itself :
1. In the standard browser, the parameters passed by the browser to the method , Just define the formal parameters e I can get it .
2. stay IE6~8 in , The browser does not pass parameters to methods , If necessary , Need to window.event To find .

solve :
e = e ll window.event;

  Two . Common properties and methods of event objects

Properties and methods of common event objects

 e.target and this The difference between

e.target The object that triggers the event is returned （ Elements )         

this What is returned is the object that binds the event （ Elements )

difference ：e.target Click on that element , Just return that element this, That element binds the click event , Then return to who

Understand compatibility issues

  3、 ... and . Blocking default behavior

dom Standard writing ：e.preventDefault();

Lower version browser ie678 ：returnValue attribute

  Four . To prevent a bubble

Event Bubbling ∶ It starts with the most specific element , Then spread up to DOM Top node .

Two ways to stop bubbling

1. Standard writing : Use the... In the event object stopPropagation() Method   （stop stop it Propagation spread ）

2. Nonstandard writing :IE6-8 Use event objects cancelBubble attribute    

e.cancelBubble = true （ Nonstandard cancel Cancel    bubble Bubble )

Compatibility solution to prevent event bubbling

  Example ：

  5、 ... and . Event delegation

Event delegates are also called event proxies , stay jQuery It's called event delegation .

principle ：

Not every child node sets up an event listener alone , Instead, the event listener is set on its parent node , Then use the bubble principle to influence the setting of each child node .

The above cases : to ul Register click events , Then use the... Of the event object target To find the currently clicked li, Because click li, Events will bubble to u On ,u There are registration events , The event listener is triggered .

effect ：

We only operated once DOM, Improved program performance .

Example ：