什么是事件？ 人与机的交互就是事件。
ui事件 onscroll 滚动条事件 onload 页面加载触发 unload 页面关闭触发 onselect 选中文本时触发 onresize 改变浏览器窗口触发 onabort 图像加载被中断触发 error 错误信息时触发 onchange 当改变一个元素的值且失去焦点时
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body style="height:3000px"> <input type="text" name="" id="" value="哈哈哈哈" /> </body> <script type="text/javascript"> // window.οnscrοll=function(){ // var h=document.documentElement.scrollTop||document.body.scrollTop; // console.log(h) // } var oinput=document.querySelector('input'); oinput.onselect=function(){ console.log(12312) } </script> </html>焦点事件 onfocus 获得焦点事件（没有冒泡，浏览器都支持） onblur 失去焦点事件（没有冒泡，浏览器都支持） onfocusin 获得焦点事件（有冒泡，IE支持） onfocusout 失去焦点事件（有冒泡，IE支持）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 300px; background: red; } </style> </head> <body> <div> <input type="text" name="" id="" value="" /> </div> </body> <script type="text/javascript"> var oinp=document.getElementsByTagName('input')[0]; var obox=document.getElementsByTagName('div')[0]; // oinp.οnblur=function(){ // console.log(2312312) // } // oinp.οnfοcus=function(){ // console.log('kkkkkkk') // } // obox.οnfοcusin=function(){ // alert(123123) // } obox.onfocusout=function(){ console.log('坎坎坷坷') } </script> </html>鼠标事件 onclick 当用户单击对象时 ondblclick 当用户双击对象时 onmouseout 移出事件 onmouseover 移入事件 onmousemove 移入元素的内部不断的移动时触发 onmousedown 在用户按下了任意鼠标按钮时触发 onmouseup 在用户释放鼠标按钮时触发
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button>点击</button> </body> <script type="text/javascript"> var obtn=document.getElementsByTagName('button')[0]; // obtn.οnclick=function(){ // alert() // } // obtn.οndblclick=function(){ // alert() // } // obtn.οnmοuseοut=function(){ // alert() // } // obtn.οnmοuseοver=function(){ // alert() // } // obtn.οnmοusemοve=function(){ // alert() // } // obtn.οnmοusedοwn=function(){ // alert() // } // obtn.οnmοuseup=function(){ // alert() // } </script> </html>键盘事件 onKeydown 当用户按下键盘上的任意键时触发。 onKeypress 当用户按下键盘上的字符键时触发。 onKeyup 当用户释放键盘上的键时触发。 keyCode 返回键盘键对应的编码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div></div> </body> <script type="text/javascript"> var obox=document.getElementsByTagName('div')[0]; // window.οnkeydοwn=function(evt){ // var e=event||window.event; // obox.innerHTML=e.keyCode;//keyCode 键盘编码 // } // window.οnkeypress=function(evt){ // var e=event||window.event; // obox.innerHTML=e.keyCode;//keyCode 键盘编码 // } window.onkeyup=function(evt){ var e=event||window.event; obox.innerHTML=e.keyCode;//keyCode 键盘编码 } </script> </html>clientX 鼠标在x轴的位置 clientY 鼠标在y轴的位置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{ position: fixed; } </style> </head> <body style="height: 3000px;"> <p style="margin: 50px;"></p> <p style="margin: 150px;"></p> <p></p> </body> <script type="text/javascript"> var op1=document.getElementsByTagName('p')[0]; var op2=document.getElementsByTagName('p')[1]; var op3=document.getElementsByTagName('p')[2]; window.onmousemove=function(e){ var e=e||window.event; op1.innerHTML='我是可视区域'+e.clientX+','+e.clientY; op2.innerHTML='我是页面区域'+e.pageX+','+e.pageY; op3.innerHTML='我是屏幕区域'+e.screenX+','+e.screenY; } </script> </html>pageX 鼠标在页面x轴的位置 pageY 鼠标在页面y轴的位置
screenX 鼠标在屏幕的x轴的位置 screenY 鼠标在屏幕的y轴的位置
offsetY offsetX 火狐浏览器不兼容 layerX 火狐浏览器兼容 layerY
可视：clientWidth/clientHeight 屏幕：screenWidth/screenHeight
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 300px; background: red; } </style> </head> <body> <div></div> <p></p> </body> <script type="text/javascript"> var obox=document.getElementsByTagName('div')[0]; var op=document.getElementsByTagName('p')[0]; obox.onmousemove=function(e){ var e=e||window.event; op.innerHTML=e.offsetX+','+e.offsetY; } </script> </html>