欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解js几个绕不开的事件兼容写法

程序员文章站 2022-04-29 08:25:36
本文介绍了详解js几个绕不开的事件兼容写法,分享给大家,具体如下: 1、键盘事件 keycode 兼容性写法 var inp = document.gete...

本文介绍了详解js几个绕不开的事件兼容写法,分享给大家,具体如下:

1、键盘事件 keycode 兼容性写法

var inp = document.getelementbyid('inp')
var result = document.getelementbyid('result')

function getkeycode(e) {
 e = e ? e : (window.event ? window.event : "")
 return e.keycode ? e.keycode : e.which
}

inp.onkeypress = function(e) {
 result.innerhtml = getkeycode(e)
}

2、求窗口大小的兼容写法

当我们获取滚动条滚动距离时:

ie,chrome: document.body.scrolltop

ff: document.documentelement.scrolltop

// 浏览器窗口可视区域大小(不包括工具栏和滚动条等边线)
// 1600 * 525
var client_w = document.documentelement.clientwidth || document.body.clientwidth;
var client_h = document.documentelement.clientheight || document.body.clientheight;

// 网页内容实际宽高(包括工具栏和滚动条等边线)
// 1600 * 8
var scroll_w = document.documentelement.scrollwidth || document.body.scrollwidth;
var scroll_h = document.documentelement.scrollheight || document.body.scrollheight;

// 网页内容实际宽高 (不包括工具栏和滚动条等边线)
// 1600 * 8
var offset_w = document.documentelement.offsetwidth || document.body.offsetwidth;
var offset_h = document.documentelement.offsetheight || document.body.offsetheight;

// 滚动的高度
var scroll_top = document.documentelement.scrolltop||document.body.scrolltop;

3、dom 事件处理程序的兼容写法(能力检测)

var eventshiv = {
  // event兼容
  getevent: function(event) {
    return event ? event : window.event;
  },

  // type兼容
  gettype: function(event) {
    return event.type;
  },

  // target兼容
  gettarget: function(event) {
    return event.target ? event.target : event.srcelem;
  },

  // 添加事件句柄
  addhandler: function(elem, type, listener) {
    if (elem.addeventlistener) {
      elem.addeventlistener(type, listener, false);
    } else if (elem.attachevent) {
      elem.attachevent('on' + type, listener);
    } else {
      // 在这里由于.与'on'字符串不能链接,只能用 []
      elem['on' + type] = listener;
    }
  },

  // 移除事件句柄
  removehandler: function(elem, type, listener) {
    if (elem.removeeventlistener) {
      elem.removeeventlistener(type, listener, false);
    } else if (elem.detachevent) {
      elem.detachevent('on' + type, listener);
    } else {
      elem['on' + type] = null;
    }
  },

  // 添加事件代理
  addagent: function (elem, type, agent, listener) {
    elem.addeventlistener(type, function (e) {
      if (e.target.matches(agent)) {
        listener.call(e.target, e); // this 指向 e.target
      }
    });
  },

  // 取消默认行为
  preventdefault: function(event) {
    if (event.preventdefault) {
      event.preventdefault();
    } else {
      event.returnvalue = false;
    }
  },

  // 阻止事件冒泡
  stoppropagation: function(event) {
    if (event.stoppropagation) {
      event.stoppropagation();
    } else {
      event.cancelbubble = true;
    }
  }
};

4、解决 ie9 以下浏览器不能使用 opacity

opacity: 0.5;
filter: alpha(opacity = 50);
filter: progid:dximagetransform.microsoft.alpha(style = 0, opacity = 50);

5、为一个元素绑定两个相同事件:attachevent/attacheventlister 出现的兼容问题

事件绑定:(不兼容需要两个结合做兼容if..else..)

ie8以下用: attachevent('事件名',fn);

ff,chrome,ie9-10用: attacheventlister('事件名',fn,false);

 function myaddevent(obj,ev,fn){
   if(obj.attachevent){
    //ie8以下
    obj.attachevent('on'+ev,fn);
   }else{
    //ff,chrome,ie9-10
    obj.attacheventlister(ev,fn,false);
   }
  }

6、获取元素的非行间样式值

function getstyle(object,ocss) {
    if (object.currentstyle) {
     return object.currentstyle[ocss];//ie
    }else{
     return getcomputedstyle(object,null)[ocss];//除了ie
    }
  }

7、节点加载

//火狐下特有的节点加载事件,就是节点加载完才执行,和onload不同
//感觉用到的不多,直接把js代码放在页面结构后面一样能实现。。
document.addeventlistener('domcontentloaded',function ( ){},false);//dom加载完成。好像除ie6-8都可以.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。