Home >Web Front-end >JS Tutorial >Cross-browser events in JavaScript (graphic tutorial)
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; } };
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; } };
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); } }
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); } }
Cross-browser blocking default behavior
function preDef(ev){ var e = ev || window.event; if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue =false; } }
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; } }
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; } }
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 } } },
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
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!