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. ZJOI 2018 一试记

    ZJOI一试几天,天微冷,雨.倒是考试当天近午时分出了太阳. 开题前的一刻,心情反而平静了,窗外泛着淡金色的日光照进来,仿佛今天的我并不是所谓来冲击省队,而只是来经历一场洗礼. 开题了,虽然有一点小插 ...

  2. 毕业设计预习:maxplus2入门教程

    maxplus2入门教程 一.安装配置(maxplus2.zip) 下载安装完成后,运行maxstart.exe,显示如下错误提示: 为节省配置工作,在E:盘下新建maxplus2文件夹,仅将所需附加 ...

  3. android与H5互相调用

    市面上很多android软件都有内嵌H5的,主要是为了节约成本,提高开发效率,其实现原理主要是通过Java代码和JavaScript代码的互相调用来实现. Java调用Js 1,webview初始化: ...

  4. php高效遍历文件夹、高效读取文件

    /** * PHP高效遍历文件夹(大量文件不会卡死) * @param string $path 目录路径 * @param integer $level 目录深度 */ function fn_sc ...

  5. 解题:CF983B pyramid

    题面 题目都告诉我们是“金字塔”了,不妨分析分析$f$的性质 $f(a_1,a_2)=f(a_1$ $xor$ $a_2)=a1$ $xor$ $a_2$ $f(a_1,a_2,a_3)=f(a_1$ ...

  6. [NOI2012]美食节——费用流(带权二分图匹配)+动态加边

    题目描述 小M发现,美食节共有n种不同的菜品.每次点餐,每个同学可以选择其中的一个菜品.总共有m个厨师来制作这些菜品.当所有的同学点餐结束后,菜品的制作任务就会分配给每个厨师.然后每个厨师就会同时开始 ...

  7. Linux运维三:系统目录结构

    Linux系统目录结构官方参考:http://www.pathname.com/fhs/ 1:Linux树状目录结构图 下面目录中标红的是必须要掌握的! 2:根目录  目录 描述 / 第一层次结构的根 ...

  8. 使用object_box遇到的崩溃 java.lang.UnsatisfiedLinkError:

    java.lang.UnsatisfiedLinkError: dalvik.system.PathClassLoader[DexPathList[[zip file "/data/app/ ...

  9. springboot 以jar方式在linux后台运行

    linux命令如下: nohup java -jar 自己的springboot项目.jar >日志文件名.log 2>&1 & 命令解释: nohup:不挂断地运行命令, ...

  10. [Node.js] querystring类

    和参数相关的帮助类,原生自带,直接 require('querystring') 即可使用. 此类一共包括4个方法: querystring.stringify(obj, [sep], [eq]) q ...