Javascript-Event Summary

Elevation: Chapter 13th Events

The event flow describes the order in which events are received from the page.
1. Event bubbling stream: The event starts with the most specific element received and then propagates up to the less specific node (document). All browsers are supported.
2. Event capture: In contrast to event bubbling, event capture is intended to capture an event before it reaches a predetermined target (rarely used unless special circumstances are observed).
3, DOM event flow: Divided into three stages: the event capture phase, in the target phase (the actual target received the event) and the event bubbling phase (this phase of the event should occur).

an "event handler" is a function that responds to an event. The name of the event handler starts with on.
1, HTML event handler: Disadvantage: First, there is a time difference problem, the second disadvantage is that the extension event handler scope chain in different browsers will result in different results. Third, the HTML and JavaScript code tightly coupled, to change the event handler needs to change two places.
2. DOM0-level Event handlers: (Specifying event handlers via JavaScript) is simple, with cross-browser advantages, you must first obtain a reference to an object to manipulate. Each property has its own event handlers, which are usually all lowercase. For example: Btn.onclick=function () {}, to remove this event handler, simply: Btn.onclick=null;
3. DOM2 Level Event handler: defines two methods for handling the actions of the specified and deleted event handlers: AddEventListener () and Removeeventlistene (). They accept three parameters (the name of the event to be processed, A Boolean value that is a function of the event handler and a Boolean value is true, which indicates that the event handler is called in the capture phase, which is false, indicating that the event handler is called during the bubbling phase. The advantage of adding an event handler to this method is that you can add multiple event handlers. The execution order is the same as the order of addition. Event handlers added through AddEventListener () can only be removed using RemoveEventListener (), and they must pass in the same parameters. In most cases, event handlers are added to the bubbling phase of the event stream, which maximizes compatibility with various browsers.
4, IE event handler: two methods: Attachevent () and DetachEvent (), accept two identical parameters, namely event handler name and event handler function. In the case of attachevent (), the event handler is performed in the global scope, This=window here. Similarly attachevent () can add multiple event handlers for an element, in the order in which they are added in reverse order.
5. Cross-browser event handlers: Methods: AddHandler () and RemoveHandler (), accept the same three parameters: the element to manipulate, the event name, and the function of the event handler.

"Event Object"
1. Event object in DOM: the DOM-compatible browser will pass an event object into the handler. To block the default behavior of a particular event, you can use the Preventdefault () method. The Stoppropagation () method is used to immediately stop the propagation of an event in the DOM hierarchy. The event object will only exist during the execution of the handler.
2, the event object in IE: When adding an event handler using the DOM0-level method, event is present as a property of window, and if it is an event handler specified by the HTML attribute, the object of event can be accessed through a variable named event. Because the scope of the event handler is determined by the way that you specify it, you cannot assume that this is always equal to the event target, so use event.src.Element to compare insurance. The ReturnValue property is equivalent to the Preventdefault () method in the DOM, which cancels the default behavior of a given event by setting the value of ReturnValue to false.
3. Cross-Browser Event object: Add a method to the Eventutil object to implement the information that gets the object, and the Gettarget () method returns the target of the event. The Preventdefault () method, the Stoppropagation () method is also useful here.

"Event Type"
1. UI events: Refer to events that are not necessarily related to user actions.
Load Event:-onload is triggered when the page has finished loading.
Unload event: Triggered after a document is completely uninstalled. As long as the user switches from one page to another, the Unload event is triggered, and the event is used more clearly to avoid a memory leak. You can also specify the OnUnload event handler.

Resize event: But when the browser window is resized to a new height or width, it triggers the event, which is triggered on the Windows window and can be specified by the OnResize special event handler. Scroll event: Occurs on a Window object, indicating the change of the corresponding element in the page. This change can be monitored by scrollleft and scrolltop in promiscuous mode.
2. Focus Event: Triggered when the focus is acquired or lost.
3, Mouse and Wheel event: Click event User clicked Trigger, DblClick double-click mouse event, mouseout mouse move in event, MouseOver Mouse move out event.
mouse Buttons: The property values of button buttons, browsers that support DOM versions of mouse events can also be detected by the Hasfearture () method, so you can feed Eventutil objects again by adding Getbutton methods.
More event Information: The Detail property, which contains a numeric value that indicates how many clicks have occurred on the order location, detail the scholarly value from 1, and the value increases after each click. Altleft, Boolean value that indicates whether the ALT key is pressed, and so on.
Wheel Event: The MouseWheel event, which contains a special Wheeldelta property in addition to all the standard information for mouse events. Firefox supports a similar event named Dommousescroll.
4. Keyboard and Document events:
three keyboard events: KeyDown, pressing an event triggered by any key on the keyboard, KeyPress triggered when a character key on the keyboard is pressed, KeyUp triggered when the user releases the keys on the keyboard. (typically common when a user enters text through a text box).
a text event: TextInput, which is triggered before the text is inserted into the text box.
Key code: When the Keydown,keypress event occurs, the KeyCode property of the event object contains a code that corresponds to a specific key on the keyboard. Character encoding: CharCode property. After you have obtained the character encoding, you can use String.fromCharCode () to convert it to the actual character.
DOM3 level change: The CharCode attribute is no longer included. Contains two new properties: Key and Char, adds the Getmodifierstate () method to the event object, and takes a parameter, which is a string equal to shift, control, and so on.
TextInput Event: Triggered when the user enters a character in an editable region. His event object also contains a data property whose value is the character entered by the user, and the event object has a Inputmethod property that represents how the text is entered into a text box.
5. Composite event: Input sequence for working with IME (Input Method Editor)
6. Change events:
To Delete a node:
To Insert a node:
7. HTML5 Events
ContextMenu Event: Context menu, that is, the context menu can be recalled by right-clicking the mouse button.
Beforeunload event: Triggers before the browser unloads the page, cancels the uninstallation and continues using the page. In order to display this dialog box, you must set the value of Event.returnvalue to the string that is displayed to the user and return as the value of the function.
domcontentloaded Event: It supports adding event handlers early in the page download. A Load event similar to window.
Readystatechane Event: The purpose is to provide information about the loading state of a document or element, and each object that supports the Readystatechane event has a readystate property, including 5 values: uninitialized (uninitialized) , loading (loading), Loaded (load complete), interactive (interactive), complete (completed).

"Memory and Performance"
Event Delegate: The solution to the problem of "too many event handlers" is the event delegate.

"Impersonation Event"
simulates mouse events and simulates keyboard events.


Chapter 13 "Summary" of events
when using events, it is necessary to limit the number of event handlers in a page, the number of too many will lead to high memory consumption, the page response is not agile, based on event-bubbling mechanism of the event delegation technology, can effectively reduce the number of event handlers It is recommended that all event handlers in the page be removed before the browser uninstalls the page. JavaScript's simulated events in the browser provide a convenient way to simulate a variety of defined events, and by combining some techniques, you can simulate keyboard events to some extent.

Javascript-Event Summary