About events in IE and Firefox

Source: Internet
Author: User
If event processing is involved when Javascript is used, you need to know the differences between events in different browsers, because there are three types of JavaScript event models, they are nn4, ie4 +, and W3C/Safari; this also leads to differences in event processing in different browsers. Code To demonstrate how to make the event work normally in ie4 + and Firefox. First, check the following code: function doeventthing (eventtag ){
VaR event = eventtag | window. event;
VaR currentkey = event. charcode | event. keycode;
VaR eventsource = Window. event. srcelement | eventtag.tar get;
}


This code is mainly used to handle keyboard events. In IE, event can be directly used as an attribute of the window object, but W3C model is used in Firefox, it transmits events by passing parameters. That is to say, You need to provide an interface for Event Response for your function. In the above functions,
Eventtag plays this role.
VaR event = eventtag | window. event;
This code can get the correct event according to the browser, andProgramIf you use this code in ie4 +, because eventtag is null, you can ensure that event = Window. event, but if it is run in Firefox, VAR event = eventtag is given manually. Based on the analysis of this piece of code, we can easily see that the doeventthing method can be transformed as follows (because JavaScript allows us to explicitly specify the number of parameters when defining a function ): function doeventthing (){
VaR event = arguments [0] | window. event;
// Other code
}


In Firefox, arguments [0] is used as a parameter to spread events (when no function parameter is explicitly specified) in a specific scenario ............
VaR currentkey = event. charcode | event. keycode; is also caused by different browsers. keycode is recorded under ie4 +, but charcode is recorded under Firefox. Therefore, we need to deal with their differences.
Another difference is the acquisition of event sources: Through statements
VaR eventsource = Window. event. srcelement | eventtag.tar get;
We also see the difference between IE and W3C.
After the above packaging, we can basically use the event mechanism smoothly under ie4 + and Firefox, of course, if we can encapsulate this difference to form our own event object and use the event object in the program, we will not introduce it here.

Next, we will analyze the binding of events: There are five types:
1. bind to an element, which is also a common example:
<Input type = "button" onclick = "doeventthing (event)">
In this way, we bind doeventthing to the button object and click this button to trigger the event.
2. Bind events to objects: this is also a common one, especially under ie4 +:
Document. getelementbyid ("divid"). onclick = doeventthing;
3. Use <script for> to bind events. This is only useful in ie4 + (BIND events for buttong1, and the logic writes events in the script block to specify how to trigger events ): <SCRIPT event = "onclick" for = "button1">
// Script statements here
</SCRIPT>

 
4. Use the attachevent () method of ie5/Windows
5. Use the addeventlistener () method of W3C dom
Addeventlistener ("eventtype", listenerreference, captureflag );
The third parameter is a Boolean value indicating whether the node listens for events in the so-called capture mode in the Dom. For a typical event listener, the third parameter should be false ).

Prototype is compatible with IE and W3C when binding events as follows: _ observeandcache: function (element, name, observer, usecapture ){
If (! This. Observers) This. Observers = [];
If (element. addeventlistener) {// W3C dom
This. Observers. Push ([element, name, observer, usecapture]);
Element. addeventlistener (name, observer, usecapture );
} Else if (element. attachevent) {// ie5/Windows
This. Observers. Push ([element, name, observer, usecapture]);
Element. attachevent ('on' + name, observer );
}
}


Aside from this. Observers. pust ([element, name, observer, usecapture]), we will be very clear about binding events 4 and 5. We know that the usecapture of this prototype method does not work in IE, but it only works in W3C event processing mechanism.

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.