Home > Developer > Web Develop
The following is a discussion of the Event object in JS, mainly from the following three aspects of the detailed description (click the title can jump to the corresponding section):
1. What is an event
2. How to use the event, with what he should pay attention to, a few simple practical applications
3.event compatibility issues with different browsers and how to solve them
1. What is an event
The event object represents the state of the incident, such as the element in which the event occurred, the state of the keyboard key, the position of the mouse, the state of the mouse button, and so on. The popular point is that the event is a system built-in object of JS. Normally unavailable, an event object is generated automatically based on the events triggered by the DOM element when the DOM element takes on various events such as keystrokes, mice, and so on. Then you can directly use this newly created object to query some information or to complete some functions (PS: Of course there are browser differences, followed by).
So let's run a simple code and see what's inside this event object:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> </Head> <Body> <Buttononclick= "func ()"style= "width:80px; height:40px;">Point Me</Button> </Body> <Scriptlanguage= "JavaScript"> functionfunc () {Console.log (event); } </Script></HTML>
Then we look at the results of the console printing:
This is a very simple test, from the console of the results are not difficult to see, here the bread contains a lot of information, which is presented in the form of object properties. The same information is also the property of the event, which can be directly linked through the link syntax. So we can print them directly when we need these attribute information, and then use them as appropriate.
About all the properties of the event, in this is not introduced, the introduction of the very clear, you need to know the direct point here to see the event property description.
< Span style= "font-family: Song body; Color: #000000 ">&NBSP; 2. How to use the event, with what he should pay attention to
Be aware that the event object will only take effect if it occurs. So we typically use the information to view the event by binding events, calling the function. And in IE, event is a global object. That means you can call it whenever you want to use it. There is no need to be constrained.
For example, the following code:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> </Head> <Body> <Buttononclick= "func ()"style= "width:80px; height:40px;">Point Me</Button> </Body> <Scriptlanguage= "JavaScript"> functionfunc () {console.log (event.target.tagName); Console.log (event.target.textContent); Console.log (Event.type); } </Script></HTML>
Then look at the effect:
This is the result of running in IE, it is obvious that we can get the information we want as long as the query is based on the property of the event. And the event here does not receive scope restrictions. It means that he is a global. The code here is the name of the element that was clicked when the button had a click event, the name of the event executed, and the text value of the clicked element. So the use of the event is particularly flexible.
Let me give you an example:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> </Head> <Body> <Buttonclass= "BUT1"onclick= "func ()"style= "width:200px; height:40px;">Point Me</Button> </Body> <Scriptlanguage= "JavaScript"> functionfunc () {if(Event.target.className=="BUT1") {Event.target.style.backgroundColor="Red"; Event.target.textContent="my content has been modified and turned red."; Event.target.className="But2"; }Else{Event.target.style.backgroundColor="Blue"; Event.target.textContent="My content has been revised and turned blue."; Event.target.className="BUT1"; } } </Script></HTML>
Then look at the effect of the code:
Let's take a look at this piece of code. In fact, it is very simple to do a series of actions on the DOM element that triggers the event through the properties of event. This is done by detecting the class name of the button, modifying the button's content and background color, and modifying the class name of the button to make multiple judgments. This creates the need for each click to make the button's background color and content appear different.
It's amazing to see if it feels right. This is the magic of the event. You can use the event object to do any style action you want to implement. Do not need to bother to fetch nodes, do not need to write cumbersome style. Encapsulate all the actions you want into a function, and then call through the event. This kind of operation and its flexibility.
Of course, the event object is not omnipotent, he also has his flaws. Because his execution needs to occur after the event, so he can only do the Web page modification, no trigger event, can not implement the operation. Moreover, the browser compatibility problem is also very uncomfortable, this we say later. But in general, this kind of programming in most cases, can greatly improve the speed of code writing, reduce the amount of code. As for the flexibility of use, it depends on the proficiency of all of you.
3. Event compatibility issues in different browsers, and how to resolve
before, what we have not said is the browser compatibility issue with the event. Now let's focus on the solution. Here is the main browser IE, Google, Firefox as an example to introduce.
(1) IE as the browser of that era Big Brother, is now our most hated browser, tears ran ~ ~. But in the event this piece, he really did very conscience ah. Please listen to me slowly ... In IE, event is a global variable, and there is no scope problem. That is, who triggered the event, that in the event-bound function, you can do anything directly with the properties of the events, with no scope restrictions, and no other function format requirements. So in IE, be assured of daring to use it!
(2) Google Chrome Google did a good job, and there is no problem with it. In Chrome, event is not a global variable. He is passing a formal parameter by default in each event bound function, note that the first parameter of the function is the event object, and we do not need to write the parameter. If you want to use event in a function that is bound by events, the direct event. Click on his attributes. By default, the event object is passed to the function as a parameter. You do not need to do anything here, just use it, simple and rude.
Here's another example, see the code below:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> </Head> <Body> <Buttononclick= "func (' Pop me to ')">Func</Button> </Body> <Scriptlanguage= "JavaScript"> functionfunc (haha) {alert (event.target.tagName); //returns the button name, because the object has tagName this keyalert (event.target); //He returns an object with information about the DOM node that triggered this time .alert (Event.type); //Back to clickalert (haha); Console.log (event); } </Script></HTML>
Note that the function func () seems to have only one formal parameter, but he also has an event parameter, which is the system default, how to write our own formal parameters, and then within the function can also directly use the event keyword directly to the event object. As for the rest of the work is done silently by the browser.
Here is the emphasis on IE and Chrome, although it looks like the use of the same, in fact, there are essentially different, just browser encapsulation is good.
(3) Firebox Firefox Firefox is a bit of a hassle. Because Firefox does not have the event variable. But the solution is also very simple. To use the event, we need to first use the following statement var e = arguments.callee.caller.arguments[0] | | window.event; very simple, plus he can be compatible with Firefox, you can use the same as Google, etc. The event object. Of course, there are other solutions, this person likes to see, you can also modify the configuration of Firefox. Here is not listed, there is an interest can Baidu a bit.
That event introduced to this, although only to say a little fur, he said that the use of too flexible, can only be based on the specific circumstances of the treatment. Finally, if this article has the wrong place also invites the friend to point out, also welcome everybody in the comment area or the private message I better event object Application instance, we learn from each other!
The transformation of the front-end programmer--js Event object Properties, usage instances, compatibility handling (greatly improving code efficiency, reducing Code volume)
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
