This is the 21st day of my participation in the August More Text Challenge.
The event, a senior
There are two ways to register events
The traditional way
● Features: Uniqueness of registered events. Only one program handler can be registered for an element and an event, and subsequent handlers will override the previous ones
Eventtarget.onclick = function(){}
Method listener registration addEventListener() (not supported before IE9)
● Multiple listeners can be registered for the same element and event, and executed in the order of registration (the following program will pop up window 22 and 33 in sequence)
Unbind (delete) events
eventTarget.onclick = null;
eventTarget.removeEventListener(type, listener);
Low pay attention! When an event is registered with addEventListener, the handler can be written outside and then called inside the event method
DOM Event Flow (P251) –>The eventOccurs between element nodesIn a particular ordertheCommunication processThe DOM event stream (the order in which events are received from the page)
Capture phase
Current target stage
Event bubbling phase
● It is received by the most concrete element and propagated hierarchically up to the topmost DOM node
Low blog.csdn.net/chenjuan199…
The event object
An event object is a collection of data related to an event
● For example: the mouse click event contains the mouse event related information, such as mouse coordinates, etc.; Keyboard events contain information about keyboard events, such as determining which keyboard key was pressed
● Event objects are written inside parentheses of listener functions (event handlers) and can be treated as parameters. And the event object can be named itself (event in the figure). The event object exists only when it has an event. It is automatically created by the system and does not require us to pass arguments
Properties and methods of common event objects
e.target Returns the object that triggered the event
● Note the difference from this: this returns the element bound to the event. E.target returns the element clicked; This returns whichever element is bound to the click event
● Due to the event bubbling phase, clicking on Li will also trigger events bound to UL
● e.type The type of the event returned
● e.preventDefault() prevents default actions (events)(e.g. link click jump, button click submit)
● E.sectopPropagation () prevents bubbles (use e.ancelbubble = true in IE678)
Event delegate (proxy, delegate)
● Principle: Instead of setting event listeners for each child node (binding events), set event listeners on the parent node, and then set each child node with the effect of event bubbling
● Case: a UL contains many Li’s, bind click events to ul. If you click li, the event will bubble up to UL and trigger the click event. You can then use the event object’s E.target to get which Li is clicked
Function: We only operate the DOM once, which improves the efficiency of the program
Common Events
Common mouse events
● Onclick left mouse click/ondblclick double mouse click events
● OnMouseover mouseover trigger
● MouseEnter is triggered when the mouse passes over an element
● The difference: Bind a mouse over event to a box
● Mouseover: The mouse is triggered when it passes over a box, and when it passes over a sub-box
● MouseEnter: Only the bound box itself will trigger
● Reason for the difference: The mouseEnter event does not bubble
● Onmouseout mouse off trigger
● With mouseEnter, use mouseleave mouse away event (Mouseleave also does not bubble)
● OnFocus gets focus trigger
● Onblur loses focus trigger
● Disable text selection and disable right-click menu methods (after adding the corresponding event set in the listener function to prevent default behavior)
● Mousemove Mouse drag event (often written in mouse down event)
● Mouseup mouse release event (often written in mouse down event)
Common properties of mouse event objects
Common keyboard events
Order of execution of three events: keyDown –> keypress –> keyUp
● Use the traditional register event method to add on, use the addEventListener() register without adding on
● The keyCode property of the keyboard event object returns the ASCII code value of a key; Note that keyDown and KeyUp events are not case sensitive, whereas keyPress events are case sensitive
● BOM provides objects that interact with browser Windows independently of content. The core object is window