Talk about event events under IE and Firefox_javascript skills

Because there are three event models in JavaScript, they are NN4, IE4 and W3C/Safari; this also causes differences in processing events in different browsers. Here is a combination of some fragmented code to illustrate how to make events work in IE4 and Firefox. normal operation.
First look at the following code:

Copy the code The code is as follows:

function doEventThing(eventTag ){
var event = eventTag||window.event;
var currentKey = event.charCode||event.keyCode;
var eventSource =window.event.srcElement||eventTag.target;
}

This code is mainly used to handle keyboard events. In IE, event can be used directly as an attribute of the window object, but in Firefox, the W3C model is used, which is passed by Parameter method is used to propagate events, which means that you need to provide an event response interface for your function. In the above function,
eventTag plays this role.
　var event = eventTag||window.event;
This code can get the correct event according to different browsers and use it in the program. If you use this code under IE4, the eventTag is null. It is guaranteed that event = window.event, but if running under Firefox, var event = eventTag because the eventTag is manually given. Based on the analysis of this piece of code, it is not difficult to see that the doEventThing method can be modified as follows (because JavaScript allows us to not explicitly indicate the number of parameters when defining a function):

Copy code The code is as follows:

function doEventThing(){
var event = arguments[0]||window.event;
//other code
}

Under Firefox arguments[0] is used as a parameter for propagating events in certain situations (when the number of function parameters is not explicitly specified)... .........
As for var currentKey = event.charCode||event.keyCode;, it is also caused by different browsers. KeyCode is recorded under IE4, but charCode is recorded under Firefox. For this reason, we need to deal with it. their differences.
Another difference is the acquisition of the event source: through the statement
var eventSource = window.event.srcElement||eventTag.target;
We have also seen 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 for the sake of versatility, we can encapsulate this difference to form our own Event object and use it with other events in the program. Object will not be introduced here.

Next, analyze the binding of events: they are roughly divided into the following five types
1. Binding to elements, which is also a common one, such as:

, so we bind doEventThing to the button object, and the event is triggered when this button is clicked.
　2. Bind events to objects: This is also a common one, especially under IE4:
　document.getElementById("divid").onclick = doEventThing;
　3. Use

4. Use the attachEvent() method of IE5/Windows
5. Use the addEventListener() of W3C DOM ) Method
　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.

The prototype does the following when binding events to be compatible with IE and W3C:

Copy code The code is 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);
}
}

Leaving aside this.observers.pust([element,name,observer,useCapture]), we are very clear about the event binding mentioned in 4 and 5. We know that useCapture of this method of prototype has no effect under IE and only works on the W3C event processing mechanism.