Cross-browser events in JavaScript (graphic tutorial)-JS Tutorial-php.cn

First of all, it is worth mentioning that there are browser compatibility issues with methods or objects such as event processing, event objects, and preventing the propagation of events. During the development process, it is best to write a universal event processing tool. Well, next we Let’s take a look at the basic methods of cross-browser event operations in JavaScript

Binding events

EU.addHandler = function(element,type,handler){ //DOM2级事件处理，IE9也支持 if(element.addEventListener){ element.addEventListener(type,handler,false); } else if(element.attachEvent){ //type加'on' //IE9也可以这样绑定 element.attachEvent('on' + type,handler); } //DOM0级事件处理步，事件流也是冒泡 else{ element['on' + type] = handler; } };

Copy after login

Unbinding eventsand binding The processing of certain events is basically the same. There is one note:
The handler passed in must be the same as the one passed in when binding the event (pointing to the same function)

EU.removeHandler = function(element,type,handler){ if(element.removeEventListener){ element.removeEventListener(type,handler); } else if(element.attachEvent){ element.detachEvent('on' + type,handler); } else{ //属性置空就可以 element['on' + type] = null; } };

Copy after login

Add events across browsers

function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(type,fn,false); }else if(obj.attachEvent){//IE obj.attchEvent('on'+type,fn); } }

Copy after login

Cross-browser removal event

function removeEvent(obj,type,fn){ if(obj.removeEventListener){ obj.removeEventListener(type,fn,false); }else if(obj.detachEvent){//兼容IE obj.detachEvent('on'+type,fn); } }

Copy after login

Cross-browser blocking default behavior

function preDef(ev){ var e = ev || window.event; if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue =false; } }

Copy after login

Get the target object across browsers

function getTarget(ev){ if(ev.target){//w3c return ev.target; }else if(window.event.srcElement){//IE return window.event.srcElement; } }

Copy after login

Get the scroll bar position across browsers

//跨浏览器获取滚动条位置，sp == scroll position function getSP(){ return{ top: document.documentElement.scrollTop || document.body.scrollTop, left : document.documentElement.scrollLeft || document.body.scrollLeft; } }

Copy after login

Get the visual window size across browsers

function getWindow () { if(typeof window.innerWidth !='undefined') { return{ width : window.innerWidth, height : window.innerHeight } } else{ return { width : document.documentElement.clientWidth, height : document.documentElement.clientHeight } } },

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Detailed analysis and answers to the principle of JavaScript operation

##About Eclipse removing js (JavaScript) verification errors (details Answer)

Basic JavaScript tips (picture and text tutorial, detailed answers for you)

The above is the detailed content of Cross-browser events in JavaScript (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!