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对象; }

 // 只有在主鼠标按钮被单击时(一般是鼠标左键)才会触发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('按下了右键!'); } }

 // 事件对象提供了两组来获取浏览器坐标的属性: // 一组是页面可视区坐标; // 一组是屏幕坐标; 坐标属性 属性       说明 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); });

 // 有时,我们需要通过键盘上的某些键来配合鼠标来触发一些特殊的事件; // 这些键为: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的值; }

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

 // 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编码转换成实际的字符;

 // 兼容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); }

 // 现代浏览器都是冒泡类型;而捕获模式是早期的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(); }