JavaScript 事件对象介绍

JavaScript事件的一个重要的方面是它们拥有一些相对一致的特点,可以给开发提供强大的功能;
最方便和强大的就是事件对象,它们可以帮你处理鼠标事件和键盘敲击方面的情况;
此外还可以修改一般事件的捕获/冒泡流的函数;
一事件对象

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

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

// 通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等;
二鼠标事件
// 鼠标事件是Web上面最常用的一类事件,毕竟鼠标还是最主要的定位设备;
1.鼠标按钮

// 只有在主鼠标按钮被单击时（一般是鼠标左键）才会触发click事件,因此检测按钮的信息并不是必要的;// 但对于mousedown和mouseup事件来说,则在其event对象存在一个button属性,表示按下或释放按钮;   非IE（W3C）中的button属性值 说明 0 表示主鼠标按钮（一般是鼠标左键）;1 表示中间的鼠标按钮（鼠标滚轮按钮）;2 表示次鼠标按钮（一般是鼠标右键）;IE中的button属性 1 表示主鼠标按钮（一般是鼠标左键）;2 表示次鼠标按钮（一般是鼠标右键）;4 表示按下了中间的鼠标按钮;// 鼠标按钮兼容;function getButton（evt）{var e = evt || window.event;if（evt）{// Chrome浏览器支持W3C和IE标准;return e.button;// 要注意判断顺序;}else if（window.event）{switch（e.button）{case 1:return 0;case 4:return 1;case 2:return 2;}}}document.onmouseup = function（evt）{if（getButton（evt） == 0）{alert（"按下了鼠标左键！"）;}else if（getButton（evt） == 1）{alert（"按下了中键"）;}else if（getButton（evt） == 2）{alert（"按下了右键！"）;}}

2.可视区及屏幕坐标

// 事件对象提供了两组来获取浏览器坐标的属性:// 一组是页面可视区坐标;// 一组是屏幕坐标;坐标属性属性 说明clientX 可视区X坐标,距离左边框的距离;clientY 可视区Y坐标,距离上边框的距离;screenX 屏幕区X坐标,距离左屏幕的距离;screenY 屏幕区Y坐标,距离上屏幕的距离;pageX页面中X坐标,距离整个页面左边框的距离;pageY页面中Y坐标,距离整个页面上边框的距离;// 判断鼠标点击位置函数;document.onclick = function（evt）{var e = evt || window.event;alert（e.clientX+","+e.clientY）;alert（e.screenX+","+e.screenY）;alert（e.pageX+","+e.pageY）;}// PS:在页面没有滚动的情况下,pageX和pageY的值与clientX和clientY的值相等;// IE8以下不支持事件对象上的页面坐标,不过使用客户区坐标和滚动信息可以计算出来;// 这时候需要用到document.body（混杂模式）或document.documentElement（标准模式）中的scrollTop和scrollLeft属性;// pageX和pageY兼容函数;var div = document.getElementById（"myDiv"）;addEventListener（div,"click",function（evt）{var evt = event || window.event;var pageX = evt.pageX,pageY = evt.pageY;if（pageX === undefined）{pageX = evt.clientX+（docuemnt.body.scrollLeft || document.documentElement.scrollLeft）;}if（pageY === undefined）{pageY = evt.clientY+（document.body.scrollTop || document.documentElement.srollTop）;}alert（pageX+pageY）;}）;

3.修改键

// 有时,我们需要通过键盘上的某些键来配合鼠标来触发一些特殊的事件;// 这些键为:Shift/Ctrl/Alt和Meat（Window中是Windows键,苹果机中是Cmd键）;// 它们经常被用来修改鼠标事件和行为,所以叫修改键;修改键属性属性 说明 shiftKey判断是否按下了Shift键;ctrlKey 判断是否按下了ctrlKey键;altKey 判断是否按下了alt键;metaKey 判断是否按下了windows键,IE不支持;// 判断按键函数;function getKey（evt）{var e = evt || window.event;var keys = [];if（e.shiftKey） keys.push（"shift"）;    // 判断是否同时按下了shift键;if（e.ctrlKey） keys.push（"ctrl"）;if（e.altKey） keys.push（"alt"）;return keys;}document.onclick = function（evt）{alert（getKey（evt））;             // 得到一个数组,可能包含shift/ctrl/alt的值;}

三键盘事件
用户在使用键盘时会触发键盘事件;
"DOM2级事件"最初规定了键盘事件,后来又删除了相应的内容;
最终还是使用最初的键盘事件,不过IE9已经率先支持"DOM3"级键盘事件;
1.键码

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

2.字符编码

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

四 W3C与IE
// 在标准的DOM事件中,event对象包含与创建它的特定事件有关的属性和方法;
// 触发的事件类型不一样,可用的属性和方法也不一样;
W3C中event对象的属性和方法
属性/方法             类型             读/写             说明
bubbles             Boolean          只读             表明事件是否冒泡;
cancelable          Boolean          只读             表明是否可以取消事件的默认行为;
currentTarget       Element          只读             其事件处理程序当前正在处理事件的那个元素;
detail              Integer          只读             与事件相关的细节信息;（一般用于滚轮信息的值）;
eventPhase          Integer          只读             调用事件处理程序的阶段:1表示捕获阶段,2表示处理目标,3表示冒泡阶段;
preventDefault（）    Function         只读             取消事件的默认行为;如果cancelable的值是true,则可以使用这个方法;
stopPropagation（）   Function         只读             取消事件的进一步捕获或冒泡;如果bubbles的值为true,则可以使用这个方法;
target              Element          只读             事件的目标;
type                String           只读             被触发的事件的类型;
view                AbstractView     只读             与事件关联的抽象视图;等同于发生事件的window对象;
IE中的event对象的属性
属性                 类型            读/写             说明
cancelBubble       Boolean          读写             默认值为false,但将其设置为true就可以取消事件冒泡;
returnValue        Boolean          读写             默认值为true,但将其值设置为false就可以取消事件的默认行为;
srcElement         Element          只读             事件的目标;
type               String           只读             被触发的事件类型;

// 兼容target和srcElement函数function getTarget（evt）{var e = evt || window.event;return e.target || e.srcElement;// 兼容得到事件目标DOM对象;}document.onclick = function（evt）{var target = getTarget（evt）;alert（target）;}

五事件流

事件流是描述的从页面接收事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么点击其中一个元素;
并不是只有当前被点击的元素会触发事件,而是层叠在点击范围的所有元素都会触发事件;
事件流包含两种模式:冒泡和捕获;
1.事件冒泡
是从里往外逐个触发;
2.事件捕获
是从外往里逐个触发;

// 现代浏览器都是冒泡类型;而捕获模式是早期的Netscape默认情况;// 现在的浏览器要使用DOM2级模型的事件绑定机制才能手动定义事件流模式;document.onclick = function（）{alert（"我是document"）;}document.documentElement.onclick = function（）{alert（"我是html"）;}document.body.onclick = function（）{alert（"我是body"）;}document.getElementById（"box"）.onclick = function（）{alert（"我是div"）;}document.getElementsByTagName（"input"）[0].onclick=function（）{alert（"我是input"）;}// PS:点击input会逐级冒泡到document;

// 阻止事件冒泡兼容函数function stopPro（evt）{var e = evt || window.event;// 如果存在cancelBubble,则是IE浏览器,将其值设为true就可以阻止事件冒泡;// 否则执行W3C中的阻止事件冒泡方法stopPropagation（）;window.event ? e.cancelBubble = true : e.stopPropagation（）;}