各种事件(html事件,鼠标事件,键盘事件,焦点事件以及阻止默认事件)
HTML事件
onload 事件 页面或图片加载完成后执行 只有图片和页面可以执行
window.onload=function(){//整个页面加载完时,执行此函数 var box=document.getElementById('box'); console.log(box); }
onerror 事件 事件在 加载外部文件 发生错误是触发
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <img onerror='cuo()' src="https://imgcps.jd.com/ling/11943278661/5aWz6Z6L6ZmQ5pe256eS5" /> <script> //onload当页面或者图片加载完时, function cuo(){ alert('图片找不到'); } </script> </body> </html>
onscroll 滚动条滚动式触发
<script> window.onscroll=function(){ console.log(window.pageYOffset); } //onscroll当滚动时 </script>
//onresize当window发生大小改变时
window.onresize=function(){ console.log(window.innerWidth); } //onresize当window发生大小改变时
鼠标事件
ondblclick//'双击时触发';
onmousedown//'当鼠标被按下时';
onmouseup//当鼠标抬起时';
onmouseenter//'当鼠标移入时';
onmouseleave//当鼠标移出时';
onmousemove //当鼠标移动时触发
onmouseover//鼠标移入时'
onmouseout//'鼠标移出时'
oncontextmenu//'鼠标右键时';//默认事件,就是不写js本身具有一定的功能
onwheel//鼠标滚轮在元素上下滚动时
整体案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{width:80px;height:80px;border:1px dashed red;} </style> </head> <body> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> <div id="box4"></div> <div id="box5"></div> <div id="box6"></div> <div id="box7"></div> <div id="box8"></div> <div id="box9"></div> <div id="box10"></div> <script> function ele(a){ var box=document.getElementById(a); return box; } var box1=ele('box1'); var box2=ele('box2'); var box3=ele('box3'); var box4=ele('box4'); var box5=ele('box5'); var box6=ele('box6'); var box7=ele('box7'); var box8=ele('box8'); var box9=ele('box9'); var box10=ele('box10'); box1.ondblclick=function(){ this.innerHTML='双击时触发'; } box2.onmousedown=function(){ this.innerHTML='当鼠标被按下时'; } box3.onmouseup=function(){ this.innerHTML='当鼠标抬起时'; } box4.onmouseenter=function(){ this.innerHTML='当鼠标移入时'; } box5.onmouseleave=function(){ this.innerHTML='当鼠标移出时'; } box6.onmousemove=function(e){ this.innerHTML=e.clientX+','+e.clientY; //当鼠标移动时触发 } box7.onmouseover=function(){ this.innerHTML='鼠标移入时'; } box8.onmouseout=function(){ this.innerHTML='鼠标移出时'; } box9.oncontextmenu=function(e){ e.preventDefault();//阻止默认事件 this.innerHTML='鼠标右键时'; } //默认事件,就是不写js本身具有一定的功能 box10.onwheel=function(){ this.innerHTML='滚动了'; //鼠标滚轮在元素上下滚动时 } </script> </body> </html>
键盘事件
onkeydown键盘按下时触发的事件 可以结合keyCode值可以具体给某个按键添加功能
window.onkeydown=function(){//一般常用与对文本框限制数量时使用 document.write('键盘被按下') }
onkeyup键盘被松开时触发的事件
window.onkeyup=function(){ document.write('键盘被松开时'); }
window.onkeydown=function(e){ box.innerHTML=e.keyCode;//按键值 if(e.keyCode==13){ alert('提交成功'); } } //onkeydown结构keyCode值可以具体给某个按键添加功能
键盘被按下 ,松开时触发事件
window.onkeypress=function(){ document.write('键盘被按下并松开时'); }