JavaScript Event Object _ Overview/this

Source: Internet
Author: User
Tags event listener

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.