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事件兼容处理的更多相关文章

  1. js 事件监听 兼容浏览器

    js 事件监听 兼容浏览器   ie 用 attachEvent   w3c(firefox/chrome)  用 addEventListener 删除事件监听 ie 用 detachEven   ...

  2. js event 事件兼容浏览器 ie不需要 event参数 firefox 需要

    js event 事件兼容浏览器    ie不需要 event参数   firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  3. js事件的一些兼容写法

    事件兼容 事件对象的兼容 获取键码兼容 默认行为兼容 阻止事件冒泡兼容 事件监听兼容 ---- 封装 删除事件监听兼容 ---- 封装 事件委托->获取事件源兼容

  4. js事件技巧方法整合

    window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...

  5. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...

  6. JS事件

    JS事件:  声明:为了事件对象event跨浏览器兼容: var oEvent==ev||event;      所以在下面用到 event 的地方都用 oEvent 代替  1)doucument的 ...

  7. js 事件

    事件:一般用于浏览器与用户操作进行交互 js事件的三种模型:内联模型.脚本模型.DOM2模型 内联模型:事件处理函数是HTML标签的属性 <input type="button&quo ...

  8. js事件监听器用法实例详解

    这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分 ...

  9. js事件绑定细节说明

    javascript绑定事件: 经常用jQuery去写,时间长了对原生态的js事件绑定的知识会慢慢淡化或者遗忘了,必须翻出来再次总结,今天再次把js原生态事件的处理做个总结. 从最初开始,谁刚接触ja ...

随机推荐

  1. Apache Commons IO之FileUtils的常用方法

    Apache Commons IO 在学习io流的时候研究(翻译)了一下这个,只有FileUtils的某些方法,并不全面,还请谅解 org.apache.commons.io 这个包下定义了基于 st ...

  2. HDU 1686 Oulipo / POJ 3461 Oulipo / SCU 2652 Oulipo (字符串匹配,KMP)

    HDU 1686 Oulipo / POJ 3461 Oulipo / SCU 2652 Oulipo (字符串匹配,KMP) Description The French author George ...

  3. 【纪中集训2019.3.13】fft

    题意: 描述 一共有\(n+m\)道题,其中\(n\)道答案是\(A\),\(m\)道答案是\(B\): 你事先知道\(n和m\),问在最优情况下的期望答错次数,对\(998244353\)取模: 范 ...

  4. laravel 中的 toSql 获取带参数的 sql 语句

    默认情况下,toSql 获取到的 sql 里面的参数使用 "?" 代替的,如下: DB::table('user')->where('id', 1)->toSql(); ...

  5. insert tp5.1

    $insertId = Db::name('user_address')->insertGetId($data); 会插入数据,返回插入的 id //$flag = Db::name('user ...

  6. Docker数据管理(四)

    Docker数据管理 Docker数据分为两种: 数据卷 -v /data -v src:dst 数据卷容器 --volumes-from 数据卷 案例1:我们创建一个容器,起名叫nginx-volu ...

  7. 【转载】14个你可能不知道的 JavaScript 调试技巧

    了解你的工具可以极大的帮助你完成任务.尽管 JavaScript 的调试非常麻烦,但在掌握了技巧 (tricks) 的情况下,你依然可以用尽量少的的时间解决这些错误 (errors) 和问题 (bug ...

  8. bzoj千题计划155:bzoj3543: [ONTAK2010]Garden

    http://www.lydsy.com/JudgeOnline/problem.php?id=3543 枚举每一个点,作为左下角 然后枚举 相同的x坐标,y坐标 少的那个 作为另一个角 二分判断另外 ...

  9. bzoj千题计划125:bzoj1037: [ZJOI2008]生日聚会Party

    http://www.lydsy.com/JudgeOnline/problem.php?id=1037 一个区间是否满足 任意连续的一段,男孩与女孩的数目之差不超过k, 取决于男孩与女孩数目之差的最 ...

  10. NOI2006 最大获利(最大权闭合子图)

    codevs 1789 最大获利 2006年NOI全国竞赛  时间限制: 2 s  空间限制: 128000 KB   题目描述 Description 新的技术正冲击着手机通讯市场,对于各大运营商来 ...