一、什么是事件对象
在触发DOM上的某个事件时,会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。
包括导致事件的元素,事件的类型以及其他与特定事件相关的信息。
【举例】
鼠标操作导致的事件对象中,会包含鼠标位置的信息,
键盘操作导致的事件对象中,会包含按下的键有关的信息
二、事件对象的兼容性问题及解决方案
- document.onclick = function(ev){
- var oEvent = ev || event;
- }
-
- document.onclick = function(ev){
- var oEvent = ev || event;
- console.log(oEvent.clientX+"--"+oEvent.clientY);
- }
-
-
-
-
-
-
-
- document.οnmοusemοve=function (ev){
- var oEvent=ev||event;
- var oDiv=document.getElementById('div1');
- var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
- var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
-
- oDiv.style.left=oEvent.clientX+scrollLeft+'px';
- oDiv.style.top=oEvent.clientY+scrollTop+'px';
- };
三、鼠标事件和键盘事件
1、鼠标事件
onclick —— 鼠标点击事件
onmousedown —— 鼠标按下事件
onmouseup —— 鼠标抬起事件
onclick = onmousedown + onmouseup;
2、键盘事件
onkeypress —— 键盘点击事件
onkeydown —— 键盘按下事件
onkeyup —— 键盘抬起事件
keyCode 事件属性 :获取按下的键盘按键Unicode值
- document.οnkeydοwn=function (ev){
- var oEvent=ev||event;
- alert(oEvent.keyCode);
- };
3、其他属性:ctrlKey,shiftKey,altKey
-
- window.onload = function(){
- var oTxt1=document.getElementById('txt1');
- var oTxt2=document.getElementById('txt2');
-
-
- oTxt2.οnkeydοwn=function (ev){
- var oEvent=ev||event;
- if(oEvent.ctrlKey && oEvent.keyCode==13){
- oTxt1.value+=oTxt2.value+'\n';
- oTxt2.value='';
- }
- }
- }
- <textarea id="txt1" rows="10" cols="40"></textarea><br />
- <input id="txt2" type="text" />