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

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

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

(0)

相关推荐

  • IE与Firefox下javascript getyear年份的兼容性写法

    IE与Firefox下javascript getyear年份不同浏览器 JavaScript 的getyear年份函数兼容性问题 先举个例子 用 Firefox 上一些网站会看到这样的提示 现在时间是 106年8月8日 而用 ie 浏览器的话就显示正常的 2006年8月8日 原因就是 javascript 的兼容性问题 var today = new date(); var year = today.getYear(); 在 Firefox 里面 getYear 返回的是 "当前年份-1900

  • 常用原生JS兼容性写法汇总

    就来总结一下简单的东西 备注:一下的方法都是包裹在一个EventUtil对象里面的,直接采用对象字面量定义方法了... ①添加事件方法 addHandler:function(element,type,handler){ if(element.addEventListener){//检测是否为DOM2级方法 element.addEventListener(type, handler, false); }else if (element.attachEvent){//检测是否为IE级方法 ele

  • Javascript selection的兼容性写法介绍

    复制代码 代码如下: function getSelectedText() { //this function code is borrowed from: http://www.codetoad.com/javascript_get_selected_text.asp var txt = ""; if (window.getSelection) { txt = window.getSelection(); } else if (window.document.getSelection

  • js事件源window.event.srcElement兼容性写法(详解)

    如下所示: <html> <body> <p>一个好处就是 我想让body(或其他元素内)的某些对象响应事件 就不用挨个儿去写 只要在外层上写一个 然后检查event.srcElement.tagName或其他属性是不是你想要的来决定是否响应事件就可以了.不过好像event.srcElement在ff里不起作用 </p> <p>比如</p> <p> <input value="input">

  • JS onkeypress兼容性写法详解

    要求实现输入密码后按回车,触发后台事件.看似十分简单的需求,可是却碰到不少难题啊. HTML内容中主要有一个密码输入文本框,还有一个按钮,用来触发后台事件. 1. TextBox文本框获得焦点后直接回车,页面会刷新.    经过代码仔细研究,原来是当页面中只有一个文本框控件时,当按回车健页面将刷新.    处理方法:在页面中加入一个隐藏的TextBox控件.    具体原理不明! 2. 用Jquery实现方法: $(document).ready(function(){ $("#tbPasswo

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

    本文介绍了详解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 :

  • 详解JS预解析原理

    目录 预解析的的不同机制 var的预解析机制 function 关键字的预解析步骤 预解析机制 面试题 预解析的的不同机制 预解析也叫预声明,是提前解析声明的意思:预解析是针对变量和函数来说的:但是变量和function的的预解析是两套不同的机制: 当浏览器加载我们的HTML页面的时候,首先会提供一个供JS代码执行的环境->全局作用域global(浏览器中的全局作用域,也叫顶级作用域是window) JS中的内存空间分为两种:栈内存.堆内存 栈内存:提供JS代码执行的环境,存储基本数据类型的值:

  • 实例详解JS中的事件循环机制

    目录 一.前言 二.宏.微任务 三.Tick 执行顺序 四.案例详解 1.掺杂setTimeout 2.掺杂微任务,此处主要是Promise.then 3.掺杂async/await 一.前言 之前我们把react相关钩子函数大致介绍了一遍,这一系列完结之后我莫名感到空虚,不知道接下来应该更新有关哪方面的文章.最近想了想,打算先回归一遍JS基础,把一些比较重要的基础知识点回顾一下,然后继续撸框架(可能是源码.也可能补全下全家桶).不积跬步无以至千里,万丈高楼咱们先从JS的事件循环机制开始吧,废话

  • 详解JS数组Reduce()方法详解及高级技巧

    基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组. 语法: arr.reduce(callback,[initialValue]) callback (执行数组中每个值的函数,包含四个参数) previousValue (上

  • 详解js中构造流程图的核心技术JsPlumb(2)

    前言:上篇详解js中构造流程图的核心技术JsPlumb介绍了下JsPlumb在浏览器里面画流程图的效果展示,以及简单的JsPlumb代码示例.这篇还是接着来看看各个效果的代码说明. 一.设置连线的样式和颜色效果代码示例 大概的效果如图: 这些效果看着很简单,那么,我们如何用代码去实现它呢.上章我们说过,JsPlumb的连线样式是由点的某些属性决定的,既然如此,我们就通过设置点的样式来动态改变连线的样式即可.来看代码: 首先来看看连线类型的那个select <div id="btn_line

  • 详解JS异步加载的三种方式

    一:同步加载 我们平时使用的最多的一种方式. <script src="http://yourdomain.com/script.js"></script> <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的.但这样如果js中有输

  • 详解JS数值Number类型

    Number 问题 下面的问题你都能回答对了吗? 0.1 + 0.2 == 0.3 成立吗? .e-5 表示多少? 怎么表示8进制? 怎么转换进制? 如何将字符串转换成数值或整数?反过来呢?十六进制又怎么处理? parseInt(0x12, 16) 的返回值是多少?是0x12吗? Number.MAX_VALUE 为最大数值,(new Number(12)).MAX_VALUE 是多少? JavaScript中怎么进行四舍五入?如果保留3位小数的精度? 如何获取一个随机数?如何取整?如何向上取整

  • 详解JS函数防抖

    一.什么是函数防抖 概念:函数防抖(debounce),就是指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间. 举个栗子,坐电梯的时候,如果电梯检测到有人进来(触发事件),就会多等待 10 秒,此时如果又有人进来(10秒之内重复触发事件),那么电梯就会再多等待 10 秒.在上述例子中,电梯在检测到有人进入 10 秒钟之后,才会关闭电梯门开始运行,因此,"函数防抖"的关键在于,在 一个事件 发生 一定时间 之后,才执行 特定动

  • 详解JS深拷贝与浅拷贝

    一.预备知识 1.1.JS数据类型 基本数据类型:Boolean.String.Number.null.undefined 引用数据类型:Object.Array.Function.RegExp.Date等 1.2.数据类型的复制 基本数据类型的复制,是按值传递的 var a = 1; var b = a; b = 2; console.log(a); // 1 console.lob(b); // 2 引用数据类型的复制,是按引用传值 var obj1 = { a: 1; b: 2; }; v

  • 详解js中的几种常用设计模式

    工厂模式 function createPerson(name, age){ var o = new Object(); // 创建一个对象 o.name = name; o.age = age; o.sayName = function(){ console.log(this.name) } return o; // 返回这个对象 } var person1 = createPerson('ccc', 18) var person2 = createPerson('www', 18) 工厂函数

随机推荐