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('鍵盤被按下並松開時'); }