3.1. How the event was generated *
In the first case, the user did some action on the Web page, such as clicking on a button to produce a click event. In the second case, the user does not operate on the Web page, it may also produce events, such as the browser has loaded the entire page, will generate load completion events. When the event is generated, the browser looks for the node that generated the event to bind the corresponding event handling code. If it does, the code is invoked to handle it. If not, it continues to look up the parent node and there is no corresponding event-handling code (event bubbling).
3.2. Binding Event Handling code * *
1 binding event handling code to HTML tag remainders
For example: <a id= "A1" href= "onclick=" F1 (); >click</a>
2 binding event handling code to the DOM node
var obj = document.getElementById (' A1 '); OBJ.ONCLICK=F1;
Attention:
A. F1 do not add "()", plus "()" means to immediately execute F1 this number.
B. You can use anonymous dang number to bind.
That is: Obj.onclick=function () {//code. }
C. Binding event handling code to the DOM node, you can separate the JS code is not HTML completely separated, convenient code maintenance.
D. If you want to give a binding of the dang number of parameters. You can use the anonymous Taipa number to resolve it.
That is: Obj.onclick=function () {f (parameter);}
3 The use of the browser with the binding method (understand)
Different browsers, have their own unique binding methods, because incompatible, so try to use less.
Script scripts can be written in <body>
Equivalent to the following figure
What if I pass the parameter? Use the anonymous Taipa number
Case 3.1 binding event handling code above HTML tags * *
3.3. Event Object * * *
1 Get Event Object
IE Browser: You can use the event to obtain
Firefox: You must add a parameter to the method event
For compatibility Ie,firefox, add a parameter to the method event
2 The role of the event object
A. Get the coordinates of the mouse click
Event.clientx Event.clienty
B. Obtaining an event source (the object that generated the event)
Firefox:event.target access to IE browser: event.srcelement access
3.4. Event Bubbling * *
1 What is event bubbling? When a node generates an event, the event is passed up in turn (passed to the parent node, if the parent node has a parent node, and then passed up).
2 How to prohibit bubbling? Event.cancelbubble = true;
2 "Event bubbling" phenomenon closes the dialog box "you clicked a link" and continued pop-up dialog "you clicked a div"
Case 3.4 Event Object * *
<!--Event Object-->
------------------------------------------------------------------------------------------------------
JS is an event-driven (Event-driven) response to user actions.
For example, through the mouse or key in the browser window or page elements (button, text box ...) , which we call an event.
The action of a series of programs triggered by a mouse or hotkey, called event-driven (Event-driver).
A handler or function for an event, which we call an event handler (Handler).
--------------------------------------------------------------------------------------------------------------- -------
Browser compatibility processing
<script language= "JavaScript" >
<!--
if (window). XMLHttpRequest) {//mozilla, Safari, Ie7,ie8
if (!window. ActiveXObject) {//Mozilla, Safari,
alert (' Mozilla, Safari ');
} else{
alert (' IE7 8 ');
}
} else {
alert (' IE6 ');
}
-->
</script>
-------------------------------------------------------------------------------to Be Continued
An event that requires multiple methods, can be used, separated on it
<input type= "button" value= "Red" onclick= "Mychange (This), SayHello ()"/>
<body onkeydown= "Showkey (event)" onload= "ABC ()" Onunload= "ABC2 ()" >
The above JS event-driven browser compatibility method is a small series to share all the content, I hope to give you a reference, but also hope that we support the cloud-dwelling community.
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
