javaScript--事件对象(25)

// Javascript事件的一个重要的方面是它们拥有一些相对一致的特点,可以给开发提供强大的功能;

// 最方便和强大的就是事件对象,它们可以帮你处理鼠标事件和键盘敲击方面的情况;

// 此外还可以修改一般事件的捕获/冒泡流的函数;

一 事件对象

 1 // 事件处理函数的一个标准特性是:以某些方式访问的事件对象包含有关于当前事件的上下文信息; 2 // 事件处理由三部分组成:对象.事件处理函数=函数; 3     document.onclick = function(){ 4         alert('Lee'); 5     } 6     // PS:以上程序解释:click表示一个事件类型,单击; 7     // onclick:表示一个事件处理函数或绑定对象的属性(或者叫事件监听器); 8     // document:表示一个绑定的对象,用于触发某个元素区域; 9     // function():匿名函数是被执行的函数,用于触发后执行;10 11 // 除了用匿名函数的方法作为被执行的函数,也可以设置成独立的函数;12     document.onclick = box;                                // 直接赋值函数名即可,无须括号;13     function box(){14         alert('Lee');15     }16 17 // this关键字和上下文18 // 在 面向对象 那章我们了解到:在一个对象里,由于作用域的关系,this代表着离它最近的对象;19     var input = document.getElementsByTagName('input')[0];20     input.onclick = function(){21         alert(this.value);                                // HTMLInputElement,this表示input对象;22     }

 1 // 当触发某个事件时,会产生一个事件对象,这个对象包含着所有与事件有关的信息; 2 // 包括导致事件的元素/事件的类型/以及其它与特定事件相关的信息; 3 // 事件对象,我们一般称作为event对象,这个对象是浏览器通过函数把这个对象作为参数传递过来的; 4 // 首先,我们必须验证一下,在执行函数中有没有传递参数,是否可以得到隐藏的参数; 5     function box(){                                     // 普通空参函数; 6         alert(arguments.length);                        // 0;没有得到任何传递的参数; 7     } 8     input.onclick = function(){                         // 事件绑定的执行函数; 9         alert(arguments.length);                        // 1;得到一个隐藏参数;10     }11     // PS:通过上面两组函数,我们发现,通过事件绑定的执行函数是可以得到一个隐藏参数的;12     // 说明,浏览器会自动分配一个参数,这个参数其实就是event对象;13     input.onclick = function(){14         alert(arguments[0]);                            // MouseEvent,鼠标事件对象;15     }16 17     // 上面这种做法比较麻烦,那么比较简单的做法是,直接通过接收参数来得到即可;18     input.onclick = function(evt){                     // 接受event对象,19         alert(evt);                                    // MouseEvent,鼠标事件对象;20     }21 22     // 直接接收event对象,是W3C的做法,IE不支持,IE自己定义了一个event对象,直接在window.event获取即可;23     input.onclick = function(evt){24         var e = evt || window.event;25         alert(e);                                      // 实现跨浏览器兼容获取event对象;26     }

二 鼠标事件

// 鼠标事件是Web上面最常用的一类事件,毕竟鼠标还是最主要的定位设备;

// 通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等;

 1 1.鼠标按钮  2 // 只有在主鼠标按钮被单击时(一般是鼠标左键)才会触发click事件,因此检测按钮的信息并不是必要的; 3 // 但对于mousedown和mouseup事件来说,则在其event对象存在一个button属性,表示按下或释放按钮; 4     　　 非IE(W3C)中的button属性 5     值                     说明  6     0             表示主鼠标按钮(一般是鼠标左键); 7     1             表示中间的鼠标按钮(鼠标滚轮按钮); 8     2             表示次鼠标按钮(一般是鼠标右键); 9         IE中的button属性 10     1             表示主鼠标按钮(一般是鼠标左键);11     2             表示次鼠标按钮(一般是鼠标右键);12     4             表示按下了中间的鼠标按钮;13 // 鼠标按钮兼容;14     function getButton(evt){15         var e = evt || window.event;16         if(evt){                                // Chrome浏览器支持W3C和IE标准;17             return e.button;                    // 要注意判断顺序;18         }else if(window.event){19             switch(e.button){20                 case 1:21                     return 0;22                 case 4:23                     return 1;24                 case 2:25                     return 2;26             }27         }28     }29     document.onmouseup = function(evt){30         if(getButton(evt) == 0){31             alert('按下了鼠标左键!');32         }else if(getButton(evt) == 1){33             alert('按下了中键');34         }else if(getButton(evt) == 2){35             alert('按下了右键!');36         }37     }

 1 2.可视区及屏幕坐标 2 // 事件对象提供了两组来获取浏览器坐标的属性: 3 // 一组是页面可视区坐标; 4 // 一组是屏幕坐标; 5         坐标属性 6     属性             说明 7     clientX         可视区X坐标,距离左边框的距离; 8     clientY         可视区Y坐标,距离上边框的距离; 9     screenX         屏幕区X坐标,距离左屏幕的距离;10     screenY         屏幕区Y坐标,距离上屏幕的距离;11     pageX           页面中X坐标,距离整个页面左边框的距离;12     pageY           页面中Y坐标,距离整个页面上边框的距离;13 14 // 判断鼠标点击位置函数;15     document.onclick = function(evt){16         var e = evt || window.event;17         alert(e.clientX+','+e.clientY);18         alert(e.screenX+','+e.screenY);19         alert(e.pageX+','+e.pageY);20     }21     // PS:在页面没有滚动的情况下,pageX和pageY的值与clientX和clientY的值相等;22     // IE8以下不支持事件对象上的页面坐标,不过使用客户区坐标和滚动信息可以计算出来;23     // 这时候需要用到document.body(混杂模式)或document.documentElement(标准模式)中的scrollTop和scrollLeft属性;24     // pageX和pageY兼容函数;25     var div = document.getElementById('myDiv');26     addEventListener(div,'click',function(evt){27         var evt = event || window.event;28         var pageX = evt.pageX,29             pageY = evt.pageY;30         if(pageX === undefined){31             pageX = evt.clientX+(docuemnt.body.scrollLeft || document.documentElement.scrollLeft);32         }33         if(pageY === undefined){34             pageY = evt.clientY+(document.body.scrollTop || document.documentElement.srollTop);35         }36         alert(pageX+pageY);37     });

 1 3.修改键  2 // 有时,我们需要通过键盘上的某些键来配合鼠标来触发一些特殊的事件; 3 // 这些键为:Shift/Ctrl/Alt和Meat(Window中是Windows键,苹果机中是Cmd键); 4 // 它们经常被用来修改鼠标事件和行为,所以叫修改键; 5                 修改键属性 6     属性                 说明  7     shiftKey            判断是否按下了Shift键; 8     ctrlKey             判断是否按下了ctrlKey键; 9     altKey              判断是否按下了alt键;10     metaKey             判断是否按下了windows键,IE不支持;11 12 // 判断按键函数;13     function getKey(evt){14         var e = evt || window.event;15         var keys = [];16         if(e.shiftKey) keys.push('shift');　　　　// 判断是否同时按下了shift键;17         if(e.ctrlKey) keys.push('ctrl');18         if(e.altKey) keys.push('alt');19         return keys;20     }21     document.onclick = function(evt){22         alert(getKey(evt));　　　　　　　　　　　　 // 得到一个数组,可能包含shift/ctrl/alt的值;23     }

三 键盘事件

// 用户在使用键盘时会触发键盘事件;

// "DOM2级事件"最初规定了键盘事件,后来又删除了相应的内容;

// 最终还是使用最初的键盘事件,不过IE9已经率先支持"DOM3"级键盘事件;

1 1.键码 2 // 在发生keydown和keyup事件时,event对象的keyCode属性中会包含一个代码,与键盘上一个特定的键对应;3 // 对数字字母字符集,keyCode属性的值与ASCII码中对应小写字母或数字的编码相同;字母中大小写不影响;4     document.onkeydown = function(evt){5         alert(evt.keyCode);6     }

 1 2.字符编码  2 // Firefox/Chrome/Safari的event对象都支持一个charCode属性; 3 // 这个属性只有在发生keyPRess事件时才会包含值,而这个值是按下的那个键所代表字符的ASII编码;(也包含除数字和字母以外的按键); 4 // 此时的keyCode通常等于0或者也可能等于所按键的编码; 5 // IE和Opear则是在keyCode中保存字符的ASCII编码; 6     function getCharCode(evt){ 7         var e = evt || window.event; 8         if(typeof e.charCode == 'number'){ 9             return e.charCode;10         }else{11             return e.keyCode;12         }13     }14     document.onkeypress = function(evt){15         alert(getCharCode(evt));16     }17     // PS:可以使用String.fromCharCode()将ASCII编码转换成实际的字符;

四 W3C与IE

// 在标准的DOM事件中,event对象包含与创建它的特定事件有关的属性和方法;

// 触发的事件类型不一样,可用的属性和方法也不一样;

 1             W3C中event对象的属性和方法 2 属性/方法             类型             读/写             说明  3 bubbles             Boolean          只读             表明事件是否冒泡; 4 cancelable          Boolean          只读             表明是否可以取消事件的默认行为; 5 currentTarget       Element          只读             其事件处理程序当前正在处理事件的那个元素; 6 detail              Integer          只读             与事件相关的细节信息;(一般用于滚轮信息的值); 7 eventPhase          Integer          只读             调用事件处理程序的阶段:1表示捕获阶段,2表示处理目标,3表示冒泡阶段; 8 preventDefault()    Function         只读             取消事件的默认行为;如果cancelable的值是true,则