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('键盘被按下并松开时'); }