js事件兼容处理
js封装事件处理函数,兼容ie,支持事件代理
var eventUtil = {
bindEvent: function(el, type, target, callback, popgation) {
/**
* @author zhangtian
* @date 2017/11/16
* @desc 标准浏览器与ie事件兼容处理
* @augments el:事件源 type事件类型 target事件代理元素 callback回调函数 popgation是否冒泡
*/
var caption = caption || true; //默认为冒泡
//如果不使用事件代理,target置空
if((typeof target) == "function") {
callback = target;
target = null;
}
if(el.addEventListener) {
el.addEventListener(type, function(e) {
if(target) {
console.log("事件代理");
if(e.target == target) {
callback.call(target, e); //改变this指向,如果不用call,this指向window
}
} else {
console.log("普通事件");
callback.call(el, e); //改变this指向,如果不用call,this指向window
}
}, popgation);
} else if(el.attachEvent) {
el.attachEvent("on" + type, function() {
var e = window.event;
if(target) {
console.log("事件代理");
if(e.srcElement == target) {
callback.call(target, e); //改变this指向,如果不用call,this指向window
}
} else {
console.log("普通事件");
callback.call(el, e); //改变this指向,如果不用call,this指向window
}
});
}
},
stopPropagation: function(e) {
var event = e || window.event;
if(event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
},
preventDefault: function(e) {
var event = e || window.event;
if(event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
};
js事件兼容处理的更多相关文章
- js 事件监听 兼容浏览器
js 事件监听 兼容浏览器 ie 用 attachEvent w3c(firefox/chrome) 用 addEventListener 删除事件监听 ie 用 detachEven ...
- js event 事件兼容浏览器 ie不需要 event参数 firefox 需要
js event 事件兼容浏览器 ie不需要 event参数 firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- js事件的一些兼容写法
事件兼容 事件对象的兼容 获取键码兼容 默认行为兼容 阻止事件冒泡兼容 事件监听兼容 ---- 封装 删除事件监听兼容 ---- 封装 事件委托->获取事件源兼容
- js事件技巧方法整合
window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- JS事件
JS事件: 声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event; 所以在下面用到 event 的地方都用 oEvent 代替 1)doucument的 ...
- js 事件
事件:一般用于浏览器与用户操作进行交互 js事件的三种模型:内联模型.脚本模型.DOM2模型 内联模型:事件处理函数是HTML标签的属性 <input type="button&quo ...
- js事件监听器用法实例详解
这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分 ...
- js事件绑定细节说明
javascript绑定事件: 经常用jQuery去写,时间长了对原生态的js事件绑定的知识会慢慢淡化或者遗忘了,必须翻出来再次总结,今天再次把js原生态事件的处理做个总结. 从最初开始,谁刚接触ja ...
随机推荐
- [转]Asp.Net MVC使用HtmlHelper渲染,并传递FormCollection参数的陷阱
http://www.cnblogs.com/errorif/archive/2012/02/13/2349902.html 在Asp.Net MVC 1.0编程中,我们经常遇见这样的场景,在新建一个 ...
- easyUI datetimebox 自定义显示格式
http://blog.csdn.net/littlewolf766/article/details/7329123 项目里需要显示自定义显示格式,比如只显示yyy,yyyy-mm,yyyy-mm-d ...
- 利用ansible来做kubernetes 1.10.3集群高可用的一键部署
请读者务必保持环境一致 安装过程中需要下载所需系统包,请务必使所有节点连上互联网. 本次安装的集群节点信息 实验环境:VMware的虚拟机 IP地址 主机名 CPU 内存 192.168.77.133 ...
- 关于RESTful的理解
如何更好的理解RESTful? (转自https://sanwen8.cn/p/54czrEO.html) 在测试开发中,我们经常接触到API,在调用API时候特别是第三方API时候,我们常常陷入以下 ...
- Hadoop生态圈-Hive快速入门篇之Hive环境搭建
Hadoop生态圈-Hive快速入门篇之Hive环境搭建 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.数据仓库(理论性知识大多摘自百度百科) 1>.什么是数据仓库 数据 ...
- Java基础-数组常见排序方式
Java基础-数组常见排序方式 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 数据的排序一般都是生序排序,即元素从小到大排列.常见的有两种排序方式:选择排序和冒泡排序.选择排序的特 ...
- 数学建模 数据包络分析(DEA) Lingo实现
model: sets: dmu/../:lambda; !决策单元; inw/../:s1; !投入变量集; outw/../:s2; !产出变量集; inv(inw, dmu):x; !投入数据; ...
- Linux安装python模块
# 依赖解决 # yum -y install epel-release python-devel gcc # 安装模块 # pip install psutil (若没有pip命令,可通过 yum ...
- Docker查看映射卷报错
问题描述: 当查看Docker容器的映射卷时出现报错信息,如下: [root@kazihuo ~]# docker inspect -f {{.Volumes}} volume #volume指容 ...
- javamail模拟邮箱功能获取邮件内容-中级实战篇【内容|附件下载方法】(javamail API电子邮件实例)
引言: JavaMail jar包下载地址:http://java.sun.com/products/javamail/downloads/index.html 此篇是紧随上篇文章而封装出来的,阅读本 ...