1. window.event
【Analysis Instructions】Look at a piece of code first
The code copy is as follows:
function et()
{
alert(event);//IE: [object]
}
The result of the above code running in IE is [object], but it cannot be run in Firefox.
Because event can be used directly as a property of a window object in IE, but in Firefox, the W3C model is used, which propagates events through the method of passing parameters, that is, you need to provide an event response interface for your function.
[Compatibility Processing] Add the judgment of event and get the correct event according to the browser:
The code copy is as follows:
function et()
{
evt=evt?evt:(window.event?window.event:null);
//Compatible with IE and Firefox
alert(evt);
}
2. Acquisition of keyboard value
[Analysis Note] The methods of obtaining keyboard values from IE and Firefox are different. It can be understood that the event.which under Firefox is equivalent to the event.keyCode under IE. For each other's differences, please refer to "Compatibility Test for KeyCode, which and charCode in Keyboard Events"
【Compatible Processing】
Copy the code
The code copy is as follows:
function myKeyPress(evt){
//Compatible with IE and Firefox to obtain keyBoardEvent object
evt = (evt) ? evt : ((window.event) ? window.event : "")
//Compatible with IE and Firefox to obtain the key value of the keyBoardEvent object
var key = evt.keyCode?evt.keyCode:evt.which;
if(evt.ctrlKey && (key == 13 || key == 10)){
//Ctrl and Enter were pressed at the same time
//do something;
}
}
3. Obtaining event source
[Analysis Note] When using event delegates, we can determine which element the event comes from through event source acquisition. However, in IE, the event object has a srcElement property, but no target property; in Firefox, the even object has a target property, but no srcElement property.
【Compatible Processing】
The code copy is as follows:
ele=function(evt){ //Capture the object that the current event is acting
evt=evt||window.event;
Return
(obj=event.srcElement?event.srcElement:event.target;);
}
4. Event monitoring
[Analysis Note] In terms of event listening and processing, IE provides two interfaces: attachEvent and detachEvent, while Firefox provides addEventListener and removeEventListener.
[Compatibility Processing] The simplest compatibility processing is to encapsulate these two sets of interfaces:
The code copy is as follows:
function addEvent(elem, eventName, handler) {
if (elem.attachEvent) {
elem.attachEvent("on" + eventName, function(){
handler.call(elem)});
// Use the callback function call() here, let this point to elem
} else if (elem.addEventListener) {
elem.addEventListener(eventName, handler, false);
}
}
function removeEvent(elem, eventName, handler) {
if (elem.detachEvent) {
elem.detachEvent("on" + eventName, function(){
handler.call(elem)});
// Use the callback function call() here, let this point to elem
} else if (elem.removeEventListener) {
elem.removeEventListener(eventName, handler, false);
}
}
It should be noted that under Firefox, this in the event handling function points to the listened element itself, but in IE, you can use the callback function call to let the current context point to the listened element.
5. Mouse position
[Analysis Note] Under IE, the even object has x and y attributes, but no pageX and pageY attributes; under Firefox, the even object has pageX and pageY attributes, but no x and y attributes.
[Compatibility Processing] Use mX(mX = event.x ? event.x : event.pageX;) to replace event.x under IE or event.pageX under Firefox. The absolute position must be considered for complex points.
The code copy is as follows:
function getAbsPoint(e){
var x = e.offsetLeft, y = e.offsetTop;
while (e = e.offsetParent) {
x += e.offsetLeft;
y += e.offsetTop;
}
alert("x:" + x + "," + "y:" + y);
}