var EventUtil = {
/*
*添加事件处理 参数:元素对象 事件类型 处理函数
*/
addHandle: function (element, type, handle) {
//dom2级的事件添加
if (element.addEventListener) {
element.addEventListener(type, handle, false);
} else {
//IE 的事件添加
if (element.attachEvent) {
element.attachEvent('on' + type, handle);
} else {
//给元素特性赋值
element['on' + type] = handle;
}
} },
/*
*移除事件处理 参数:元素对象 事件类型 处理函数
*/
removeHandle: function (element, type, handle) {
//dom2级的事件移除
if (element.removeEventListener) {
element.removeEventListener(type, handle, false);
} else {
//IE的事件移除
if (element.detachEvent) {
element.detachEvent('on' + type, handle);
} else {
//给元素特性赋值为空对象以移除事件
element['on' + type] = null;
}
}
},
//获得event对象 IE中以参数event对象传入 Dom中通过window.event来访问
getEvent: function (event) {
return event ? event : window.event;
},
//获得事件的目标 dom中通过event.target获得 IE中通过event.srcElement
getTarget: function (event) {
return event.target || event.srcElement;
},
//取消事件的默认行为
preventDefault: function (event) {
if (event.preventDefault) {
//Dom 方法
event.preventDefault();
} else {
//设置IE event.returnValue = false
event.returnValue = false;
}
},
//停止事件冒泡
stopPropagation: function (event) {
//Dom 方法
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;;
}
},
//获得相关目标对象
getRelatedTarget: function (event) {
//Dom 方法 relatedTarget只对mouseover和mouseout事件才包含值 否则 这个值为null
if (event.relatedTarget) {
return event.relatedTarget;
} else {
//IE
if (event.toElement) {
return event.toElement;
} else {
if (event.fromElement) {
return event.fromElement;
} else {
return null;
}
}
}
},
//获得鼠标按键 0表示左键 1表示中间轮 2表示右键
getButton: function (event) {
//是否支持Dom鼠标事件
if (document.implementation.hasFeature('MouseEvents', '2.0')) {
return event.button;
} else {
switch (event.button) {
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4: return 1;
}
}
},
//获得字符编码
getCharCode: function (event) {
if (typeof event.charCode == 'number') {
return event.charCode;
} else {
return event.keyCode;
}
}
};

公共事件处理函数js库的更多相关文章

  1. js中关于事件处理函数名后面是否带括号的问题

    今天总结一个关于事件处理程序的小细节.首先回顾一下事件处理的一些概念. JS中的事件处理(事件绑定)就是让某种或某些事件触发某些活动.有两种常见的形式,分别是DOM Level 0 和DOM Leve ...

  2. JS绑定事件处理函数及处理流程

    一.事件绑定的几种方式: 1.1 ele.on+“事件名“:如div.onclick = function(event){ }; 1.1.1这种方式兼容性非常好,但一个元素的同一个事件上只能绑定一个处 ...

  3. js跨浏览器的事件处理函数

    /* 跨浏览器的事件处理函数 */ var EventUtil = { addHandler : function(element,type,handler){ if(element.addEvent ...

  4. js 中用Dom2级事件处理函数(改变样式)

    下面这些客户端 javascript代码用到了事件,它给一个很重要的事件--“load" 事件注册了一个事件处理程序.同时展示了注册”click“事件处理函数更高级的一种方法 <!do ...

  5. js中绑定事件处理函数,使用event以及传递额外数据

    IE8中使用attachEvent绑定事件处理函数时,不能直接向event 对象添加数据属性.可以用属性复制的方法,包装新的event对象. 1. 属性复制var ObjectExtend = fun ...

  6. 仿照jquery封装一个自己的js库(一)

    所谓造轮子的好处就是复习知识点,加深对原版jquery的理解. 本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包 ...

  7. jQuery总结--版本二 事件处理函数

    一:事件处理函数 (1) one(事件名称, fn) 仅对指定事件监听一次,监听事件只会执行一次 <!DOCTYPE html> <html> <head lang=&q ...

  8. 解决同一页面jQuery多个版本或和其他js库冲突方法

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  9. 前端之Vue.js库的使用

    vue.js简介 Vue.js读音 /vjuː/, 类似于 view Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大框架 ...

随机推荐

  1. mvc5+ef6+Bootstrap 项目心得--身份验证和权限管理

    1.mvc5+ef6+Bootstrap 项目心得--创立之初 2.mvc5+ef6+Bootstrap 项目心得--身份验证和权限管理 3.mvc5+ef6+Bootstrap 项目心得--WebG ...

  2. Infer.net 开源组件: 1, 机器学习入门,要从贝叶斯说起

    我的入门方式,先从应用现象中,总结规律反推本质.一头扎进理论书籍是不对的. 老外的先进,还是体现在传承方面.没办法,我们竞争压力大,有好东西藏着掖着.大家都苦逼 我最开始是从介绍,有了基本概念,见xx ...

  3. Bootstrap系列 -- 1. 如何使用Bootstrap

    一. Bootstrap 简介 Bootstrap 是一个前端框架,使用Bootstrap可以做出很多漂亮的页面,中文官网:http://www.bootcss.com/ 二. Bootstrap核心 ...

  4. svn1.8 server client eclipse 插件 配置 完全教程

    svn毋庸置疑,广受欢迎的版本管理软件,我们这里以1.8.10版本为例 本文分三部分 第一部分,服务器端svn安装与配置 第二部分,eclipse下svn插件安装与配置 第三部分,客户端svn简单介绍 ...

  5. 虚拟机VirtualBox 5.1.0|VBOX

    Oracle VM VirtualBox是一款免费.开源的虚拟机软件,现属于Oracle旗下产品.可以安装Windows.Linux.IBM OS/2.Solaris.BSD等操作系统,具有远端桌面协 ...

  6. [转]为什么我要用 Node.js? 案例逐一介绍

    原文地址:http://blog.jobbole.com/53736/ 介绍 JavaScript 高涨的人气带来了很多变化,以至于如今使用其进行网络开发的形式也变得截然不同了.就如同在浏览器中一样, ...

  7. ScrollView内部元素如何做到fill_parent 或者 match_parent?

    转  : http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/0704/1629.html ScrollView滚动视图是指当拥有很多 ...

  8. Spring 在web 容器中的启动过程

    1.对于一个web 应用,其部署在web 容器中,web 容器提供其一个全局的上下文环境,这个上下文就是 ServletContext ,其后面的spring IoC 容器提供宿主环境 2.在web. ...

  9. eclipse-mvn打包跳过junit测试类

    修改pom.xml,在build选项加上plugins的这段如下: <build> ..... <plugins> <plugin> <groupId> ...

  10. html-div中内容自动换行

    <div style='width: 100px;display:block;word-break: break-all;word-wrap: break-word;'> 内容超出div宽 ...