js事件监听/鼠标滚轮/行为/冒泡/键盘的兼容性写法
addEvent:function(el,type,fn,capture) {
if (window.addEventListener) {
if (type === "mousewheel" && document.mozHidden !== undefined) {
type = "DOMMouseScroll";
}
el.addEventListener(type, fn, !!capture);
} else if (window.attachEvent) {
el.attachEvent("on" + type, fn);
}
},
removeEvent:function(el,type,fn,capture) {
if (window.removeEventListener) {
if (type === "mousewheel" && document.mozHidden !== undefined) {
type = "DOMMouseScroll";
}
el.removeEventListener(type, fn, !!capture);
} else if (window.detachEvent) {
el.detachEvent("on" + type, fn);
}
},
//对鼠标滚轮、行为、冒泡以及键盘做的兼容性处理
eventCompat:function(e) {
e || (e = root.event);
var type = e.type;
if (type == 'DOMMouseScroll' || type == 'mousewheel') {
e.delta = (e.wheelDelta) ? -e.wheelDelta / 120 : (e.detail || 0) / 3;
}
if (e.srcElement && !e.target) {
e.target = e.srcElement;
}
//阻止默认行为
if (!e.preventDefault) {
e.preventDefault = function() {
e.returnValue = false;
};
}
//阻止冒泡
if (!e.stopPropagation && e.cancelBubble !== undefined) {
e.stopPropagation = function() {
e.cancelBubble = true;
};
}
//键盘的兼容性处理
if(e.which == null){
e.which = e.charCode != null ? e.charCode : e.keyCode;
}
/*
......其他一些兼容性处理 */
return e;
},
bindAsEventListener:function(context, fun) {
var self = this;
return function(e) {
return fun.call(context, self.eventCompat(e));
}
}
//调用:
var dom = document.getElementById('btn');
var object = {
clickCtrl:function(e){
alert(e);
}
};
addEvent(dom, "click", function(){
alert(dom.id);
});
addEvent(dom, "mousedown",
bindAsEventListener(object, function(e){
object.ClickCtrl(e);
}));
js事件监听/鼠标滚轮/行为/冒泡/键盘的兼容性写法的更多相关文章
- js 事件监听 冒泡事件
js 事件监听 冒泡事件 的取消 [自己写框架时,才有可能用到] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...
- js事件监听机制(事件捕获)总结
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
- js事件监听机制(事件捕获)
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...
- java 事件监听 - 鼠标
java 事件监听 - 鼠标 //事件监听 //鼠标事件监听 //鼠标事件监听有两个实现接口 //1.MouseListener 普通的鼠标操作 //2.MouseMotionListener 鼠标的 ...
- js 事件监听 兼容浏览器
js 事件监听 兼容浏览器 ie 用 attachEvent w3c(firefox/chrome) 用 addEventListener 删除事件监听 ie 用 detachEven ...
- javascript的事件监听与捕获和冒泡
在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调来进行相关的操作. 而js中事件监听方法总共有三种,分别如下所示: element.addEventL ...
- js 事件监听封装
var eventUtil={//添加句柄 //element,节点 //type,事件类型 //handler,函数 addHandler:function(element,type,handler ...
- JavaScript的事件监听、捕获和冒泡
在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调函数来进行相关的操作. 而JavaScript中事件监听的方法总共有三种,分别如下: element. ...
- js事件监听-addEventListener (w3c标准) 和 attachEvent(ie)
研究了一个小时,没看懂这两个属性 window.onload = function(){ var oDiv = document.getElementById("J_myDiv") ...
随机推荐
- Leetcode Valid Sudoku
Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudoku board could be ...
- PHP实现快速排序、插入排序、选择排序
1.快速排序 快速排序(Quicksort)是对冒泡排序的一种改进.由C. A. R. Hoare在1962年提出.它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都 ...
- 一些关于Viewport与device-width的东西~
进行移动web开发已经有一年多的时间了,期间遇到了一些令人很困惑的东西.比如: 我们经常使用的<meta name="viewport" content="widt ...
- <四>JDBC_PreparedStatement的使用
WHY? <1>使用Statement需要进行拼写SQL语句,容易出错; <2>PreparedStatement:是Statement的子接口,可以传入带占位符的SQL语句, ...
- CSS3初学篇章_7(布局/浏览器默认样式重置)
CSS布局说到布局,就不得不提布局的核心<div>标签,它与其它标签一样,也是一个XHTML所支持的标签,专门用于布局设计的容器标签.在css布局方式中,div 是这种布局方式的核心对象, ...
- 20145205 实验一 Java开发环境的熟悉
实验内容 命令行下Java程序开发 IDEA下Java程序开发.调试 练习(通过命令行和Eclipse两种方式实现,在Eclipse下练习调试程序) 实现凯撒密码,并进行测试 实验要求 使用JDK编译 ...
- C#编译执行过程
前言 大家好,我是卫斯理(Wesley).喜欢武侠的朋友可能知道小说中也有个卫斯理,他是位冒险家,财力充沛,极富冒险精神,并且有着超强的好奇心,对奇异的事情总有"打破沙锅问到底"的 ...
- centos6修改nameserver
1.直接修改/etc/resolv.conf,重启网卡 #service network restart 后发现并没有修改掉 2.直接修改ifcfg-eth0文件 /etc/sysconfig/net ...
- ECMAScript Web APIs node.js
https://hacks.mozilla.org/2015/04/es6-in-depth-an-introduction/ What falls under the scope of ECMASc ...
- 贪吃蛇的java代码分析(三)
代码剖析 在上一篇文章中,我们完成了贪吃蛇部分代码的构造.回头审视我们写的代码与思路,会发现我们遗漏了一个重要的地方,那就是:贪吃蛇的自身移动.想必大家都知道,贪吃蛇自身是会自己移动的,并且会跟随你的 ...