Javascript browser compatible tutorial event handling

1. The window. The event

First look at a piece of code

function et()
{ 
alert(event);//IE: [object]
}

The above code runs as [object] in IE, but not in Firefox.

Because in IE, event can be used directly as a property of the window object, but in Firefox, the W3C model is used. It propagates events by passing parameters, which means that you need to provide an interface for your function to respond to events.

[compatibility processing] add an event judgment to get the correct event according to the browser:

function et()
{ 
evt=evt?evt:(window.event?window.event:null);
　　//Compatible with IE and Firefox
alert(evt);
}

2. Keyboard value acquisition

IE and Firefox have different methods to get keyboard values, so it is understandable that the event.which in Firefox is similar to the event.keycode in IE. For their differences, please refer to the compatibility test of keyCode, which and charCode in keyboard events.

[compatibility processing]
Copy the code

function myKeyPress(evt){
//Get the keyBoardEvent object with IE and Firefox
evt = (evt) ? evt : ((window.event) ? window.event : "")
//Get the keyBoardEvent object with IE and Firefox The key value 
var key = evt.keyCode?evt.keyCode:evt.which;
if(evt.ctrlKey && (key == 13 || key == 10)){
　　　　　　//Press Ctrl and enter at the same time
//do something;
}
}

3. Acquisition of event source

[analysis] when using the event delegate, the event source is obtained to determine which element the event comes from. However, under IE, the event object has srcElement attribute, but no target attribute. Under Firefox, the even object has a target attribute, but no srcElement attribute.

[compatibility processing]

ele=function(evt){ //The object that captures the action of the current event
evt=evt||window.event;
　　return
　　(obj=event.srcElement?event.srcElement:event.target;);
}

4. Event monitoring

In terms of event listener 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:

function addEvent(elem, eventName, handler) {
　　if (elem.attachEvent) {
　　　　elem.attachEvent("on" + eventName, function(){
　　　　　　　　　　　　　　　　　　　　handler.call(elem)});
　　　　//Use the callback function call() to point this 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() to point this to elem
　　} else if (elem.removeEventListener) {
　　　　elem.removeEventListener(eventName, handler, false);
　　}
}

It is important to note that under Firefox, this in the event handler points to the listening element itself, but not under IE. You can use the callback function call to point the current context to the listening element.

5. Mouse position

Under IE, the even object has x and y attributes, but no pageX and pageY attributes. Under Firefox, the even object has a pageX, pageY property, but no x, y property.

Use mX(mX = event.x? Event. X: event. PageX;) Instead of event.x in IE or event.pagex in Firefox. The more complicated thing is the absolute position.

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);
}