An important aspect of JavaScript events is that they have some relatively consistent features that can provide more powerful functionality for your development.
The most convenient and powerful is the event object, they can help you deal with the situation of mouse events and keystrokes, in addition to modify the general event of the capture/bubbling stream function.
First, the event processing three parts
Object. event handler = function. For example, click anywhere in the document.
Click to indicate an event type.
The onclick represents a property of an event handler or bound object (or an event listener, listener).
Document represents a bound object that is used to trigger an element area.
function () Anonymous functions are functions that are executed and executed after triggering.
<script type= "Text/javascript" > function() { function () { alert (' Lee '); }; </script>
In addition to using anonymous functions as functions that are executed, you can also set them as separate functions.
<script type= "Text/javascript" > function box () { alert (' Lee '); } function () { = box; }; </script>
Second, this keyword and context
In an object, because of the scope of the relationship, this represents the closest object to it.
<script type= "Text/javascript" > window.onload = function { var input = document . getElementsByTagName (' input ') [0 = function () {alert ( /span>this ); // htmlinputelement,this represents the input object }; }; </script>
<script type= "Text/javascript" > function box () { alert (this); // Htmlinputelement,this represents the input object }; Box (); // [Object Window] if the box () is called at the global scope then this represents Window function () { var input = document.getelementsbytagname (' input ') [0]; = box; }; </script>
Third, the event object (then what is the event object?) Where is it? )
When an event is triggered, an event object is generated that contains all the information related to the event.
Event object, which we generally call an event object, is a browser that passes the object as a parameter through a function.
So first, we have to verify that no arguments are passed in the execution function and that the hidden arguments can be obtained.
<script type= "Text/javascript" > function box () { //0, no parameters are passed }; Box (); </script>
<script type= "Text/javascript" > function() { var input = document.getElementsByTagName (' input ') [0]; function () { alert (arguments[0]); // [Object MouseEvent] Mouse event object }; }; </script>
The above practice is more tired, then the more simple way is to directly by receiving parameters to get
<script type= "Text/javascript" > function() { var input = document.getElementsByTagName (' input ') [0]; function (EVT) { // Accept Event object, name not necessarily event //MouseEvent, mouse event object }; }; </script>
Directly receive the event object, is the practice of the Internet, ie 6,7,8 does not support, IE 6,7,8 itself defined an event object, directly in the window.event to get.
<script type= "Text/javascript" > function() { var input = document.getElementsByTagName (' input ') [0]; function (evt) { var// implement cross-browser compatible get event object alert (e);}; }; </script>
JavaScript Event Object _ Overview/this