Home > Developer > JavaScript
Early events, as a means of sharing server computing load, are specific interactions that occur in real documents or browser windows, such as click Buttons, drag and drop files, and so on. We can use listeners to schedule events and respond when an event is released, a pattern called the Observer model.
Event Flow
The event flow is the order in which events are received from the page. In an HTML page, the DOM element makes up a DOM tree, because the child element is generally positioned within the parent element. Then, when the child element is clicked, it can be thought that the child element is clicked or that the parent element is clicked. Then determining who receives the Click event first becomes a problem that the browser needs to address.
Event Bubbling
When IE handles the above event, it is received by the most specific element of the event (the node with the deepest nesting level in the document), and then propagates up to the root node gradually. This is the event bubbling.
<! DOCTYPE html>
In the above code, if you click the div element, then <body>, Event Capture
The Netscape Communicator team proposed a completely opposite solution to ie, receiving events in the order of the root node to the specific node, which is the event capture. That is, in the above example, the order in which the click events are received is document, DOM Event Stream
The event flow under "DOM2 level events" includes three phases: The event capture phase, the target phase, and the event bubbling phase. The first thing that happens is event capture, which is then in the target phase, and the last event bubbles. Still take the above code as an example, click Div, first document gets the click event, then to Event Handlers
HTML event handlers
Dom elements typically have attributes that support events, such as onclick, which should be the ability to execute JavaScript code, which is its event handler, such as:
<input type= "button" value= "click Me" onclick= "alert (' click ')"/>
You can also call scripts defined elsewhere on the page:
<input type= "button" value= "click Me" onclick= "handler ()" > <script> function handler () { Alert (' click '); } </script>
There are three drawbacks to specifying an event handler in an HTML page: There is time difference, when the script is slower than binding the event DOM element, the user triggers an error when the script is not loaded, and another disadvantage is that the scope chain of the extended event handler can cause different results in different browsers, That is, the point of this is inconsistent; Finally, this tightly coupled code style leads to higher maintenance costs, modifying the HTML code and the JS code when modifying the code later.
DOM0-level event handlers
The traditional way to specify event handlers through JavaScript is to assign a function to an event handler property. This specified event handler has a simple, cross-browser advantage, and its event handlers are triggered during the bubbling phase of the event stream:
<! DOCTYPE html>
Note that you cannot specify multiple event handlers for the same event for the same element in this way, and if you bind multiple times, the last time.
DOM2-level event handlers
The DOM2 level event defines two methods for handling the actions that specify and delete event handlers: AddEventListener () and RemoveEventListener (). They accept three parameters: the event name that is handled, the event handler, a Boolean value that specifies whether to be handled during event bubbling or event capture, true for processing in the event capture phase, and false for the event bubbling phase. Note that the event handler intelligence specified through AddEventListener () is removed by RemoveEventListener (), and if the second argument in AddEventListener () is an anonymous function, cannot be removed by RemoveEventListener (), nor can there be any way to remove it. IE implements two methods similar to the DOM: Attachevent () and DetachEvent (), which receive two parameters, the first is the event name (note that the event name has an on prefix, for example, the Click event is onclick), The second parameter is the event handler function. The following example is a browser-compatible event-binding function:
<! DOCTYPE html>
Event Delegates
In fact, the operating system allocates more resources to the browser than other desktop applications, mainly because hackers use Web applications to do a lot of computing, causing the computer's resources to be too much occupied and down the machine and other reasons. JavaScript affects web page applicability in a number of ways, such as: Each function is an object, will occupy memory; the more objects in memory, the worse the performance. Second, the more DOM accesses that must be specified in advance for all event handlers, the longer the page interaction ready time is created. So too many event handlers will degrade the performance of the event, the solution to this problem is the event delegate. Event delegates can manage all events of a class by using event bubbling, specifying only one event handler. For example, you can add an event handler at the highest possible level in the DOM tree, and you can then manipulate the event target element:
<! DOCTYPE html>
As you can see from the above code, only one DOM element is fetched, and only one event handler is added, so that memory usage can be reduced. However, it is not recommended that the event agent be used for mouseover and mouseout because the Mouseout event is triggered when the mouse moves from one element to its child, or when the mouse removes the element.
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
