最方便和强大的就是事件对象,它们可以帮你处理鼠标事件和键盘敲击方面的情况;
此外还可以修改一般事件的捕获/冒泡流的函数;
一 事件对象
// 事件处理函数的一个标准特性是:以某些方式访问的事件对象包含有关于当前事件的上下文信息;// 事件处理由三部分组成:对象.事件处理函数=函数; 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(); }