Original abstracts from: http://www.cnblogs.com/linxuehan/p/3623760.html
The interaction between JavaScript and HTML is achieved through events. I. Flow of events
An event is a specific interaction moment that occurs in a document or browser window. An event flow that describes the order in which the events are accepted in the page. Ie9,chrome,firefox,opera,safari implements the standard DOM events defined in the DOM2 level specification, while IE8 and IE8 the following versions still retain proprietary event handling. Event Bubbling
Event bubbling was proposed by the IE development team, where the event was initially received by the most specific element (the node with the deepest nesting level in the document) and then propagated upward.
<! DOCTYPE html>When the user clicks on the <div> element, the Click event is propagated in the order of <div>-><body>->
<script type= "Text/javascript" > var div=document.getelementbyid ("Mydiv"); Div.onclick=function (event) { alert ("div"); }; Document.body.onclick=function (event) { alert ("Body"); </script>Click <div>, the first output "div", and then output "body".
Ie9,chrome,firefox,opera,safari supports event bubbling and bubbles the event to a Window object. Event Capture
Event capture was proposed by the Netscape Communicator team, which first receives the event first and then propagates down to the specific node. When the user clicks on the <div> element and takes event capture, the Click event is propagated in the order of document->
If the Click event is defined on both <div> and <body>, the following are:
<script type= "Text/javascript" > var div=document.getelementbyid ("Mydiv"); Div.addeventlistener ("click", Function (event) { alert ("div"); },true); Document.body.addEventListener ("click", Function (event) { alert ("Body"); },true); </script>(Note: AddEventListener specific use see this article DOM2 level event handling)
Click <div>, the first output "body", and then output "div".
Ie9,chrome,firefox,opera,safari supports event capture, but the versions below IE8 and IE8 only support event bubbling. Although the DOM2 specification requires that events be propagated from the Document object, the current browser implementation starts capturing events from the Window object. DOM Event Stream
The event flow under "DOM2 level Event" contains three phases: The event capture phase, the target phase and the event bubbling phase. The first thing that happens is event capture, then the actual target receives the event, and the final stage is the bubbling phase. Take the HTML page above as an example, click the <div> element to trigger an event according to the following illustration:
If the Click event is defined on both <div> and <body>, the following are:
<script type= "Text/javascript" > var div=document.getelementbyid ("Mydiv"); Div.onclick=function (event) { alert ("div"); }; Document.body.addEventListener ("click", Function (event) { alert ("Event bubble"); },false) ; Document.body.addEventListener ("click", Function (event) { alert ("Event catch"); },true) ; </script>Click <div>, the first output "event catch", and then output "div", the final output "event bubble." Ii. Event Handlers
An event is an action performed by a user or browser itself, and a function that responds to an event is called an event handler. HTML event handlers, DOM0-level event handlers, and IE event handlers start with "on", and DOM2-level event handlers do not need to be "on". HTML event handlers
By implementing an event as an attribute of an HTML element, the following two methods are included:
<input type= "button" value= "Confirm" onclick= "alert (' Confirm ')"/>or call a script defined elsewhere:
<script type= ' text/javascript ' > Function showmessage () {alert ("C Onfirm "); } </script> <input type= "button" value= "Confirm" onclick= "ShowMessage ()"/>
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
