javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)

复制代码 代码如下:

  var EventUtil={ //跨浏览器处理程序---创建方法

  addHandler:function(element,type,handler){

  if(element.addEventListener){

  element.addEventListneter(type,handler,false);

  }else if(element.attachEvent){

  element.attachEvent("on"+type,handler);

  }else{

  element["on"+type]=handler;

  }

  }

  removeHandler:function(element,type,handler){ //跨浏览器处理程序---删除方法

  if(element.removeEventListener){

  element.removeEventListneter(type,handler,false);

  }else if(element.detachEvent){

  element.detachEvent("on"+type,handler);

  }else{

  element["on"+type]=handler;

  }

  }

  getEvent:function(event){ //跨浏览器事件对象---返回event对象的引用

  return event?event:window.event;

  }

  getTarget:function(event){ //跨浏览器事件对象---返回事件的目标

  return event.target||event.srcElement;

  }

  preventDefault:function(event){ //跨浏览器事件对象---取消默认事件

  if(event.preventDefault){

  event.preventDefault();

  }else{

  event.returnValue=false;

  }

  }

  stoppropagation:function(event){ //跨浏览器事件对象---阻止事件流

  if(event.stoppropagation){

  event.stoppropagation();

  }else{

  event.canceBubble=false;

  }

  }

  getRelatedTarget:function(event){ //跨浏览器获取相关元素

  if(event.relatedTarget){

  return event.relatedTarget;

  }else if(event.toElement){

  return envent.toElement;

  }else if(event.fromElement){

  return event.fromElement;

  }else{

  return null;

  }

  }

  getButton:function(event){ //鼠标事件的button属性检测

  if(document.implementation.hasFeature("MouseEvent","2.0")){

  return event.button;

  }else{

  switch(event.button){

  case 0:

  case 1:

  case 3:

  case 5:

  case 7:

  return 0;

  case 2:

  case 6:

  return 2

  case 4:

  return 1

  }

  }

  }

  getCharCode:function(event){ //跨浏览器字符编码---charCode属性检测

  if(typeof event,charCode=="number"){

  return event.charCode;

  }else{

  return event.keyCode;

  }

  }

  }

  事件委托:事件处理程序过多的解决方案,减少内存并且提高性能;

  模拟事件:这个比较复杂,要慢慢研究;