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 ...
随机推荐
- CF17E Palisection——优秀的综合计数题
题意翻译 给定一个长度为n的小写字母串.问你有多少对相交的回文子 串(包含也算相交) . 输入格式 第一行是字符串长度n(1<=n<=2*10^6),第二行字符串 输出格式 相交的回文子串 ...
- php static 变量用法
有时候我们可能需要重复调用一个函数,里面有些变量不需要重复初始化.初始化成本比较高的,我们可以使用 static 关键字修饰,在该变量没有初始化的时候才进行初始化,初始化过的变量就不再初始化.如: f ...
- bootstrap.yml与application.yml的区别
说明:其实yml和properties文件是一样的原理,主要是说明application和bootstrap的加载顺序.且一个项目上要么yml或者properties,二选一的存在. Bootstra ...
- Java基础-IO流对象之字节流(Stream)
Java基础-IO流对象之字节流(Stream) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在前面我分享的笔记中,我们一直都是在操作文件或者文件夹,并没有给文件中写任何数据.现 ...
- WAV MP3 Converter-强大的音频转换软件-特别版
From:http://www.cnblogs.com/killerlegend/p/3873909.html Author:KillerLegend Date:2014.7.28 WAV MP3 C ...
- What Does “Neurons that Fire Together Wire Together” Mean?
What Does “Neurons that Fire Together Wire Together” Mean? I’ve heard the phrase “neurons that fire ...
- Centos7一键编译安装zabbix-4.0.2
##只针对centos7的系统有效,centos6无效,mysql zabbix用户:zabbix,密码:zabbix;建议用全新的centos7服务器 软件版本: (nginx-1.14.2.php ...
- spring框架学习(六)AOP事务及spring管理事务方式之Template模板
概念 1.事务 1)事务特性:ACID 原子性 :强调事务的不可分割. 一致性 :事务的执行的前后数据的完整性保持一致. 隔离性 :一个事务执行的过程中,不应该受到其他事务的干扰. 持久性 :事务一旦 ...
- beta版1.1.1
先期发布的alpha版1.0.0版本通过张硕组的测评,我小组跟进修改了出现的问题. 1.首先解决了互测版本中无法正常退出界面的问题,并有退出提示,(确定,取消). 2.就之前提到的关于前期部分功能的割 ...
- 微信小程序开发教程(七)逻辑层——.js详解
逻辑层,是事务逻辑处理的地方.对于小程序而言,逻辑层就是.js脚本文件的集合.逻辑层将数据进行处理后发送给视图层,同时接收视图层的事件反馈. 微信小程序开发框架的逻辑层是由JavaScript编写.在 ...