Js事件对象EventUtil

 1 var EventUtil = {
 2     getEvent: function(event){       //获取事件对象
 3         return event ? event : window.event;
 4     },
 5     addHandler: function(element, type, handler){ //绑定事件
 6         if (element.addEventListener) {
 7                 element.addEventListener(type, handler, false);
 8         } else if (element.attachEvent) {
 9                 element.attachEvent("on" + type, handler);
10         } else {
11                 element["on" + type] = handler;
12
13         }
14     },
15     removeHandler: function(element, type, handler){   //移除绑定
16         if(element.removeEventListener){
17             element.removeEventListener(type,handler,false);
18         }else if(element.detachEvent){
19             element.detachEvent("on"+type,handler,false);
20         }else{
21             element["on"+type] = null;
22         }
23     },
24     preventDefault: function(event){   //阻止默认事件
25         if(event.preventDefault){
26             event.preventDefault();
27         }else{
28             event.returnValue = false;
29         }
30     },
31     stopPropagation: function(event){   //阻止事件冒泡
32         if (event.stopPropagation) {
33             event.stopPropagation();
34         }else{
35             event.cancelBubble = true;
36         }
37     },
38     getRelateTarget: function(event){ //事件相关元素的信息
39         if(event.relatedTarget){
40             return event.relatedTarget;
41         }else if(event.toElement){
42             event.toElement;
43         }else if(event.fromElement){
44             return event.fromElement;
45         }else{
46             return null;
47         }
48     },
49     getButton: function(event){  //检测button属性
50         if(document.implementation.hasFeature("MouseEvents","2.0")){
51             return event.button;
52         }else{
53             switch(event.button){
54                 case 0:
55                 case 1:
56                 case 3:
57                 case 5:
58                 case 7:
59                         return 0;//主鼠标按钮
60                 case 2:
61                 case 6:
62                         return 2;//次鼠标按钮
63                 case 4:
64                         return 1;//鼠标滚轮按钮
65             }
66         }
67     },
68     getWheelDelta: function(event){//鼠标滚动属性值
69         if(event.wheelDelta){
70             return (client.engine.opera && client.engine.opera <9.5  ? -event.wheelDelta:event.wheelDelta)
71         }else{
72             return -event.detail *40;
73         }
74     },
75     getCharCode: function(event){//获取字符编码
76         if(typeof event.charCode == "number"){
77             return event.charCode;
78         }else{
79             return event.keyCode;
80         }
81     },
82     getCilpboardText: function(event){//获取剪切板内容
83         var cilpboardData = (event.clipboardData || window.clipboardData);
84         return clipboardData.getData("text");
85     },
86     setClipboardText:function(event,value){//剪切到剪切板
87         if(event.clipboardData){
88             return event.clipboardData.setData("text/plain",value);
89         }else if(window.clipboardData){
90             return window.clipboardData.setData("text",value);
91         }
92     }
93
94
95 }

代码总结于《JavaScript高级程序设计》事件章节。

Js事件对象EventUtil

时间: 2024-10-10 20:49:59

Js事件对象EventUtil的相关文章

js事件对象坐标

js事件对象坐标---贴上代码 <body style="position:relative;width:100%;height:100%;padding:15px;margin:20px;"> <div style="position:absolute;top:100px;left:100px;width:500px;height:500px;padding:5px;margin:9px;background:#ddd;" onclick=&qu

JavaScript事件对象EventUtil

JS中事件对象有很多种,兼容性参差不齐,这个对象封装了大部分所需的各种方法 var EventUtil={ addHandler:function(element,type,handler){ //添加事件 if(element.addEventListener){ element.addEventListener(type,handler,false); //使用DOM2级方法添加事件 }else if(element.attachEvent){ //使用IE方法添加事件 element.at

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

事件对象    在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对象中,会包含鼠标位置的信息,而键盘操作导致的事件对象中,会包含与按下的键有关的信息.所有浏览器对象都支持event对象,但支持方式不同. DOM中的事件对象 兼容DOM的浏览器会将一个event对象传入到事件处理程序中.无论指定事件处理程序时使用什么方法(DOM0级或DOM2级),都会传入event

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

什么是EventUti----封装好的事件对象 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即跨浏览器的事件处理程序 习惯上,这个方法属于一个名为EventUtil的对象 编写并使用该对象后,可保证处理事件的代码能在大多数浏览器下一致的运行 var EventUtil={ addHandler:function(element,type,handler){ //添加事件 if(element

JS 事件对象和事件冒泡

1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象的获取方法: IE中可以window.event直接获取,而Firefox中则不可以,可通过如下方法获取: 1)var event = window.event || arguments.callee.caller.arguments[0]; 2)通过参数传.function(e) { var event = window.event || e; } 2.事件源 事件源即

JS—事件对象

事件对象: 在触发DOM事件的时候都会产生一个对象 事件对象Event: 1)type:获取事件类型 2)target:获取事件目标 3)stopPropagation():阻止事件冒泡 4)preventDefault():阻止事件默认行为 <div id="div"> <button id="btn">按钮</button> <a href="www.baidu.com" id="aid&q

JS:事件对象1

一,this关键字和上下文 var box = document.getElementById("box");. 普通的函数如果没有给他传递参数,函数本身是没有参数的. test();  //0 function test () { alert(arguments.length); } 但是在事件对象中是有参数的,他是通过浏览器把这个对象作为参数传递过来的.  box.onclick = function() { alert(arguments.length);// 1 alert(a

js事件对象

哎,事件也有对象呦.程序员一直在讲对象对象,那么,过年是不是该带个对象回家呢?好了,既然事件有对象,承认这个事实吧!哈哈,那么,其就有属性,接下来,就放个 例子来讲讲,顺便把常用的属性也添加进去.. Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&

js事件对象兼容性写法

dom0级事件处理时,使用属性方式注册事件处理函数: IE8和IE8以下浏览器不能传递参数,只能使用window.event对象.谷歌浏览器既可以传递事件对象参数,也可以使用window.envent对象火狐浏览器只能使用传递的事件对象参数. 兼容写法: function fn(e){ e=e||window.event; alert(e.type); }