Home > Developer > JavaScript
JavaScript Advanced Programming Chapter 13th--Events
The interaction between JS and HTML is implemented through events, which are specific moments of interaction that occur in a document or browser window.
Event Flow: Event Flow describes the order in which events are received from the page, IE is the event bubbling stream, Netscape the event capture stream, the two
is the exact opposite of the event flow concept.
Event bubbling: Is received by the most specific element and then propagated up to a more advanced node, that is, events propagate up the DOM tree until the document
Object.
Event capture: Nodes that are not specific should receive events earlier, which is equivalent to propagating down the DOM node tree to the actual target of the event,
Event is captured from the Window object, starting with the
Dom Event Flow: The DOM event flow specifies three phases: the event capture phase, the target stage, and the event bubbling phase, the actual target
The capture phase does not receive an event, which is the actual target in the target phase
Event handlers: Functions that affect an event are called event handlers (or event listeners) such as: The event handler for the Click event is
OnClick
HTML event handlers: Each event supported by an element can be specified using an HTML attribute with the same name as the corresponding event handler.
You can include specific actions to perform, or scripts that are defined elsewhere on the page, and when the code of an event handler is executed, you have access to the full
Any code in the local scope, or you can extend the scope with the WITH statement.
DOM0-level Event handlers: The first thing to do is to get a reference to the object to manipulate, at which point the event handler runs in the scope of the element.
DOM2-level Event handlers: Defines the method for handling the specified and deleted event handlers: AddEventListener () and
RemoveEventListener (), which receive three parameters: the event name, the function that is handled as an event, and a Boolean value (True for the capture order
Segment Call event handler, false means call event handler in bubbling phase)
IE event handlers: Two methods defined, attachevent () and DetachEvent () receive two parameters: event handler name and event
Handler functions that use this method to run the event handler in the global scope.
Event object: When an event on the DOM is triggered, an event object is generated that contains all the information about the event
Event objects in the DOM: a browser typically passes an event object into a handler. The Event.type property represents the type of event
Inside the event handler, object this always points to the element that is handling the event, the Currenttarget property of the event object, in short,
The event object has many properties and methods, and the event object exists only during the execution of the events handler;
After execution, the event object will be destroyed;
Event object in IE: the event object to access in IE depends on the method that specifies the handler. When you add event handling using the DOM0-level method
Program, the event object is present as a property of the Window object, and you can use the HTML attribute to specify
A variable called event to access the event object. Another thing is that the scope of the event handler is determined by the way it is specified, the This object
Does not always equal the event target (you can use event.srcelement at this time)
Event Type: UI event: Triggered when the user interacts with an element on the page. Load: When the page is fully loaded (including all images, JS files,
CSS files and other external resources) will trigger the Load event above window, define the OnLoad event handler, the first way is to use the JS code
The second way to invoke the Eventutil.addhandler method is to add an onload attribute to the <body> element
Unload Event: This event is triggered when the document is completely uninstalled, or the user switches from one page to another to trigger the Unload event
This event is used to clear references and avoid memory leaks. The OnUnload event handler is specified in the same manner as the OnLoad event;
Resize Event: The Resize event is triggered when the browser window is resized to a new height or width. This event is above the window.
Trigger, specified by JS Code: Eventutil.addhandler (Window, "Resize", function (event) {Alert ("event");});
Scroll event: The scroll event occurs on a Window object, but it actually represents a change in the corresponding element in the page.
Focus Event: The focus event is triggered when the page gets or loses focus, using these events and the Document.hasfocus () method and
Document.activeelement () method mates.
Blur: Triggered when an element loses focus, this event does not bubble and is supported by all browsers
Domfocusin: Triggered when the element receives focus, is equivalent to the HTML event focus, but it bubbles, only opera supports
Domfocusout: Triggered when the element loses focus, is equivalent to HTML event blur, but it bubbles, only opera supports
Focus: Triggers when the element gets focus, does not bubble all browsers support it
Focusin: Triggered when the element receives focus, is equivalent to the HTML event focus, but it bubbles
Focusout: Triggered when the element loses focus, this event is a generic version of the HTML event blur
Mouse and Wheel Events
Click: triggers when the mouse is clicked or the ENTER key is pressed
DblClick: Triggers when you double-click the mouse
MouseDown: Triggered when the user presses any mouse button, cannot be triggered by the keyboard
MouseEnter: triggered when the mouse cursor is first moved from outside the element to the range of elements, the event does not bubble and is moved to the descendant element.
does not trigger
MouseLeave: Fires when the mouse cursor above the element is moved outside the range of elements, the event does not bubble, and is moved to the descendant element.
does not trigger
MouseMove: When the mouse pointer moves inside an element, it is repeatedly triggered
Mouseout: Fires when the mouse pointer is over an element and then the user moves it into another element
MouseOver: Fires when the mouse pointer is outside an element and then the user first moves it inside the bounds of another element
MOUSEUOP: Triggers when the user releases the mouse
Client area coordinates location: Mouse events occur at a specific location in the browser viewport, which is saved in the event object's
In the Clientx and Clienty properties, all browsers support both properties, and their values represent the level of the mouse pointer in the viewport when the event occurs
and vertical coordinates
Page coordinates location: page coordinates the Pagex and Pagey properties of the event object tell us where the event occurred in the page, which
Two attributes indicate the position of the mouse cursor in the page
Screen coordinate position: When a mouse event occurs, there is not only a location relative to the browser window, but also a position relative to the entire computer screen.
The Screenx and Screeny properties allow you to access the coordinate information of the mouse pointer relative to the entire screen
Modifier keys: The state of some keys on the keyboard can also affect the action that you want to take when you press the mouse, and these modifier keys are shift-Ctrl-Alt-Windows
Keyboard and Text events
KeyDown: Triggered when the user presses any key on the keyboard, and repeatedly triggers this event if you press and hold
KeyPress: Triggered when the user presses a character key on the keyboard, and the event is triggered repeatedly if pressed and held (Esc also fires)
KeyUp: Triggered when the user releases a key on the keyboard
Key code: When the KeyDown and KeyUp events occur, the KeyCode property of the event object contains a code that is associated with a specific
The key corresponds.
TextInput event: When a user enters a character in an editable region, the TextInput event is triggered, and the event will only be entered when the user presses the
The key of the actual character is triggered, the event pair of the TextInput events contains a data property, and the value of the property is the character entered by the user;
There is also a inputmethod that represents the way text is entered into a text box.
Composite event: A composite event is used to process the input sequence of an IME, allowing the user to enter characters that are not found on the physical keyboard, but only ie9+ supports
This event.
Change event: In summary, a change event is a sequence of events triggered when the DOM node tree changes in HTML, including adding nodes, deleting
nodes, replacement nodes, and so on
HTML5 Events
ContextMenu event: Used to indicate when the context menu should be displayed so that the developer can cancel the default context menu and provide a customized
menu; ContextMenu is bubbling, you can specify an event handler for document
Beforeunload: This event is triggered before the browser unloads the page, which can be used to cancel the uninstallation and continue to use the original page. To display
Pop-up dialog box to set the value of Event.returnvalue to the string to be displayed to the user and return as the value of the function
Domcontentloaded event: Triggers when a complete DOM tree is formed, ignoring images, JS files, CSS files, or other resources
Whether or not the download is complete
ReadyStateChange: Provides information about the loading state of a document or element, and each object of the ReadyStateChange event has a
ReadyState property that returns the loaded state of a document or element
Pageshow Event: This event is triggered when the page is displayed (triggered after the Load event), although the target of this event is document, but
Its event handlers must be added to the window
Pagehide Event: This event is triggered when the browser unloads the page (triggered before unload) with the same characteristics as the Pageshow event
Hashchange Event: The event is triggered when the parameter list of the URL changes, and the event handler for the Hashchange event is added to the
window, the event object at this time contains two properties: Oldurl and Newurl each preserve the parameter list before and after the change
The full URL
Memory and performance: In JavaScript, the number of event handlers added to the page will directly affect the overall performance of the page.
Event delegate: Event delegation takes advantage of event bubbling, specifying only one event handler to manage all event handlers of a certain type.
This eliminates the need to add events to each target element.
Remove event Handlers: You can set the function that binds the target function to null, or remove all events through the OnUnload event handler
Handler.
Simulation Events
Event impersonation in DOM: You can create an event object on the Document object using the CreateEvent () method, which receives a parameter
That is, the event type string to represent the creation. Simulation events are mainly divided into simulated mouse events and simulated keyboard events, of course, there are simulations of other events,
After calling the CreateEvent () method, call the Dispatchevent () method to trigger the event. The method for creating a mouse event object is for CreateEvent ()
Passing in the string "Mouseevents", the returned object has a initmouseevent () method that specifies information that is useful for the mouse event.
Analogous to the method of simulating keyboard events, the CreateEvent () method is passed in "KeyboardEvent", and the returned object has a initkeyevent ()
Method. Event emulation greatly improves the performance and memory of the page.
JavaScript Advanced Programming Chapter 13th--Events
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
