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!