var EventUtil = {
addHandler: function(element,type,handler) { //事件监听
if(element.addEventListener) {
element.addEventListener(type,handler,false);
}else if(element.attachEvent) {
element.attachEvent("on"+type,handler);
}else {
element["on" +type] = handler;
}
},
removeHandler: function(element,type,handler){ //移除事件监听
if(element.removeEventListener) {
element.removeEventListener(type,handler,false);
}else if(element.detachEvent) {
element.detachEvent("on"+type,handler);
}else {
element["on" +type] = null;
}
},
getEvent: function(event) {//获取event对象,返回event对象的引用
return event ? event : window.event;
},
getTarget: function(event) {//返回事件目标。
return event.target || event.srcElement;
},
preventDefault: function(event){//取消或者阻止事件默认行为
if(event.preventDefault) {
event.preventDefault();
}else {
event.returnValue = false;
}
},
stopPropagation: function(event) {//阻止事件流,阻止事件冒泡
if(event.stopPropagation) {
event.stopPropagation();
}else {
event.cancelBubble = true;
}
},
getRelatedTarget: function(event){//返回相关元素信息(仅对于mouseover和mouseout事件)
if (event.relatedTarget){
return event.relatedTarget;
} else if (event.toElement){
return event.toElement;
} else if (event.fromElement){
return event.fromElement;
} else {
return null;
}
},
getWheelDelta: function(event) {//获取鼠标滚轮增量值,检测是否包含WheelDelta
if(event.wheelDelta) {
return event.wheelDelta;
}else {
return -event.detail * 40
}
},
getCharCode: function(event) {//获取键盘按键键码。
if(typeof event.charCode == 'number') {
return event.charCode;
}else {
return event.keyCode;
}
},
getButton:function(event){//在mouseup或者mousedown的时候,event存在一个button属性,用于判断是按了鼠标左键,右键,还是中键,0鼠标主键按钮,1是中间,2是次键(右键)
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; }
} }
};

封装常用的跨浏览器的事件对象EventUtil的更多相关文章

  1. 跨浏览器的事件对象-------EventUtil 中的方法及用法

    什么是EventUti----封装好的事件对象 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即 ...

  2. 跨浏览器的事件对象EventUtil

    var EventUtil = function(){ /*--addHandler--*/ addHandler:function(element,type,handler){ if(element ...

  3. js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象

    事件对象    在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...

  4. Javascript跨浏览器的事件对象

    一.跨浏览器的事件对象 var EventUtil = { ///添加事件 addHandler: function (element, type, handler) { if (element.ad ...

  5. EventUtil——跨浏览器的事件对象

    . 首页 博客园 联系我 前言:什么是EventUtil?. EventUtil对象全见. addHandler方法. removeHandler方法. event对象与getEvent方法. tar ...

  6. javaScript之跨浏览器的事件对象

    跨浏览器的兼容代码 var eventHandler = { addHandler: function(element, type, handler){}, removeHandler: functi ...

  7. js实现一些跨浏览器的事件方法

    用JavaScript实现事件的绑定,移除,以及一些常用的事件属性的获取,时常要考虑到在不同浏览器下的兼容性,下面给出了一个跨浏览器的事件对象: var EventUtil = { on: funct ...

  8. JavaScript跨浏览器绑定事件函数的优化

    JavaScript作为一门基于事件驱动的语言(特别是用在DOM操作的时候),我们常常需要为DOM绑定各种各样的事件.然而,由于低版本的IE的不给力,在绑定事件和移除事件监听上都与众不同,我们常常需要 ...

  9. js 跨浏览器实现事件

    我们知道不同的浏览器实现事件是不同的,就比如说我们常见的有三种方法: 1,dom0处理事件的方法,以前的js处理事件都是这样写的. (function () { var p=document.getE ...

随机推荐

  1. 转载:spring boot学习

    Spring Boot学习 Spring Boot是为了简化Spring应用的创建.运行.调试.部署等而出现的,使用它可以做到专注于Spring应用的开发,而无需过多关注XML的配置. 简单来说,它提 ...

  2. [转]什么是VUE?为什么用VUE?

    Vue.js新手入门指南 最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的 ...

  3. OCP 12c最新考试原题及答案(071-5)

    5.(4-12) choose two: You executed the following CREATE TABLE statement that resulted in an error: SQ ...

  4. jvisualvm_使用jstatd连接远程linux应用

    [1]确定linux系统正确安装了ssh # sudo ps -e | grep ssh ①注意使用root,使用$会报如下错误: [appadmin@webcsuat2 ~]$ sudo ps -e ...

  5. Ruby 和 OpenSSL CA 证书的问题

    作为一个版本控,总是希望保持电脑中各种软件到最新版本. 最近通过 brew 升级 OpenSSL 和 ruby-build 到最新,尤其是 ruby-build 支持最新的 Ruby 2.2.1,新版 ...

  6. jmeter聚合报告详解

    聚合报告(aggregate report) 对于每个请求,它统计响应信息并提供请求数,平均值,最大,最小值,错误率,大约吞吐量(以请求数/秒为单位)和以kb/秒为单位的吞吐量. 吞吐量是以取样目标点 ...

  7. nginx高性能WEB服务器系列之八--nginx日志分析与切割

    nginx系列友情链接:nginx高性能WEB服务器系列之一简介及安装https://www.cnblogs.com/maxtgood/p/9597596.htmlnginx高性能WEB服务器系列之二 ...

  8. js数组的常用操作

    数组合并 var arr=[1,"abc","张三","122"]; var b=["今天天气不错","适合学 ...

  9. falsk 请求钩子

    请求钩子是通过装饰器的形式实现,Flask支持如下四种请求钩子:before_first_request在处理第一个请求前执行before_request在每次请求前执行如果在某修饰的函数中返回了一个 ...

  10. 为什么我会选择走 Java 这条路?

    阅读本文大概需要 2.8 分钟.   作者:黄小斜 文章来源:微信公众号[程序员江湖] 最近有一些小伙伴问我,为什么当初选择走Java这条路,为什么不做C++.前端之类的方向呢,另外还有一些声音:研究 ...