01HTML事件：
直接在HTML元素的標(biāo)簽內(nèi)添加事件，執(zhí)行腳本。
語法：<tag 事件="執(zhí)行腳本" > </tag>
功能：在HTML元素上綁定事件。
說明：執(zhí)行腳本可以是一個函數(shù)的調(diào)用
01鼠標(biāo)事件
onload:頁面加載時觸發(fā)
onclick：鼠標(biāo)點(diǎn)擊時促發(fā)
onmouseover:鼠標(biāo)滑過時觸發(fā)
onmouseout：鼠標(biāo)離開時觸發(fā)
onfoucs：獲取焦點(diǎn)時觸發(fā)
onblur：失去焦點(diǎn)時觸發(fā)
onchange：域內(nèi)容發(fā)生改變是觸發(fā)
02鼠標(biāo)事件
onsubmit:表單中確認(rèn)按鈕被點(diǎn)擊時發(fā)生(注釋：加在表單上?。?！不是按鈕上！)
onmousedown：鼠標(biāo)按鈕在元素上按下時觸發(fā)
onmousemove：在鼠標(biāo)指針移動時發(fā)生
onmouseup：在元素上松開鼠標(biāo)按鈕時觸發(fā)
onresize：當(dāng)瀏覽器調(diào)整窗口大小時觸發(fā)
onscroll：拖動滾動條時觸發(fā)
鍵盤事件與KeyCode屬性
onkeydown:在用戶按下一個鍵盤按鍵時發(fā)生
onkeypress:在鍵盤按下并釋放一個鍵時發(fā)生
onkeyup:在鍵盤按鍵松開時發(fā)生
keyCode：（返回onkeypress,onekeydown or onkeup事件觸發(fā)的鍵的值的字符代碼，或鍵代碼）
關(guān)于this指向
在事件觸發(fā)函數(shù)中，this是對DOM對象的引用。
<!DOCTYPE html>
<html>
<head lang="cn">
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">
/**{background: aqua;}*/
.btn{width: 140px;height: 30px;line-height: 30px;
background: aquamarine;color: red;font-size: 14px;text-align: center;
border-radius: 8px;cursor: pointer; margin-top: 30px;}
</style>
</head>
<body>
<input type="button" value="彈 出" onclick="alert('彈出！')" />
<div id="btn" class="btn" onmouseover="over(this)" onmouseout="mouseout(this)">開 始</div>
<script type="text/javascript">
function over(btn){
btn.style.background='aqua';
console.log(btn);
}
function mouseout(btn){
btn.style.background='aquamarine';
}
</script>
</body>
</html>
image.png
02 DOM 0級事件
1.通過DOM獲取HTML元素
2.（獲取HTML元素）.事件=執(zhí)行腳本
語法：ele.事件=執(zhí)行腳本
功能：在DOM對象上綁定事件
說明：執(zhí)行腳本可以是一個匿名還是，也可以是一個函數(shù)的調(diào)用
<!DOCTYPE html>
<html>
<head lang="cn">
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">
/**{background: aqua;}*/
.btns{width: 140px;height: 30px;line-height: 30px;
background: aquamarine;color: red;font-size: 14px;text-align: center;
border-radius: 8px;cursor: pointer; margin-top: 30px;}
.unbtns{width: 140px;height: 30px;line-height: 30px;
background: chartreuse;color: red;font-size: 14px;text-align: center;
border-radius: 8px;cursor: pointer; margin-top: 30px;}
</style>
</head>
<body>
<input type="button" value="彈 出" onclick="alert('彈出！')" />
<div id="btn" class="btns">鎖定</div>
<script type="text/javascript">
function over(btn){
btn.style.background='aqua';
console.log(btn);
}
function mouseout(btn){
btn.style.background='aquamarine';
}
var anli = document.getElementById('btn');
anli.onclick=function(){
if(anli.innerHTML=='鎖定'){
anli.className='unbtns';
anli.innerHTML='解鎖';
}else if(anli.innerHTML=='解鎖'){
anli.className='btns';
anli.innerHTML='鎖定';
}
}
</script>
</body>
</html>
image.png
image.png
<!DOCTYPE html>
<html>
<head lang="cn">
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">
.box{
padding: 50px;
}
.left,.tip{
float: left;
}
.left{margin-right: 10px;}
.tip{display: none;font-size: 14px;}
</style>
<script type="text/javascript">
window.onload=function(){
console.log("激活");
}
</script>
</head>
<body>
<div class="box">
<div class="left">
<input type="text" id="phone" placeholder="親輸入手機(jī)號碼" />
</div>
<div class="tip" id="tip">
親輸入6位有效的手機(jī)號碼
</div>
</div>
<script type="text/javascript">
var phone = document.getElementById('phone'),
tip = document.getElementById('tip');
phone.onfocus=onFC;
phone.onblur=onbl;
function onFC(){
tip.style.display='block';
}
function onbl(){
var phonenumber=this.value;//value獲取表單的值；
// console.log(phonenumber);
if(phonenumber.length==6 && isNaN(phonenumber)==false){
tip.innerHTML="用戶名無誤";
}else{
tip.innerHTML="輸入錯誤！";
}
}
</script>
</body>
</html>
<body>
<div class="box">
親選擇你喜歡的BGCOLOR
<select name="" id="baselect">
<option value="">請選擇</option>
<option value="red">紅色</option>
<option value="aquamarine">綠色</option>
<option value="deepskyblue">藍(lán)色</option>
<option value="yellow">黃色</option>
<option value="powderblue">灰色</option>
</select>
</div>
<script type="text/javascript">
var selectbase = document.getElementById("baselect");
selectbase.onchange=xz;
function xz(){
var bgColor = this.value;
// var bgColor = selectbase.options[selectbase.selectedIndex].value;
if(bgColor==''){
document.body.style.background='white';
}else{
document.body.style.background=bgColor;
}
}
</script>
</body>
image.png
<body>
<div id="box" style="width: 200px; height: 200px;background: aquamarine; padding: 25px;">
</div>
<script type="text/javascript">
var get_box = document.getElementById('box');
get_box.onmousedown=function(){console.log('我被按下了');};
get_box.onmousemove=function(){console.log("我被移動了");};
get_box.onmouseup=function(){console.log("鼠標(biāo)離開我了")};
window.onresize=function(){console.log("我的尺寸被改變了")};
window.onscroll=function(){console.log("滑動了")};
</script>
</body>
<body>
<div>你還可以輸<span id="tip">30</span></div>
<textarea name="" id="textnum" rows="5" cols="40"></textarea>
<script type="text/javascript">
var get_textnum=document.getElementById('textnum');
get_textnum.onkeyup=function(){
var get_tip=document.getElementById('tip'),
jsp=30;
var lens=get_textnum.value.length;
var zf=jsp-lens;
// console.log(zf);
get_tip.innerHTML=zf;
}
</script>
</body>
image.png
