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


Posted in Javascript onAugust 30, 2017

本文介绍了详解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都可以.

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

Javascript 相关文章推荐
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
关于js数组去重的问题小结
Jan 24 Javascript
用json方式实现在 js 中建立一个map
May 02 Javascript
javaScript实现滚动新闻的方法
Jul 30 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
Node.js返回JSONP详解
May 18 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
JS实现商品橱窗特效
Jan 09 Javascript
jquery轮播图插件使用方法详解
Jul 31 jQuery
JavaScript实现滑动导航栏效果
Aug 30 #Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 #Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 #Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 #Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 #Javascript
详解使用nvm管理多版本node的方法
Aug 30 #Javascript
jquery插件开发之选项卡制作详解
Aug 30 #jQuery
You might like
php 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
phpwind放自动注册方法
2006/12/02 Javascript
Javascript Object.extend
2010/05/18 Javascript
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
python解析基于xml格式的日志文件
2017/02/25 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
Django实现学生管理系统
2019/02/26 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
运动会领导邀请函
2014/01/10 职场文书
初中英语教学反思
2014/01/25 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers
vue里使用create, mounted调用方法
2022/04/26 Vue.js