JavaScript--DOM事件
事件就是文檔或瀏覽器窗口中發(fā)生的一些特定的交互瞬間俗冻。
一礁叔、HTML事件
語法：<tag 事件=“執(zhí)行腳本”></tag>
功能：在HTML元素上綁定事件。
說明：執(zhí)行腳本可以是一個函數(shù)的調(diào)用迄薄。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.btn{
width: 140px;
height: 30px;
line-height:30px;
background:#00f;
color:#fff;
font-size: 14px;
text-align: center;
border-radius: 10px;
cursor: pointer;
margin-top: 30px;
}
</style>
</head>
<body>
<input type="button" value="彈出" onclick="alert('我是按鈕')">
<!--鼠標(biāo)劃過按鈕時調(diào)用mouseoverFn的函數(shù)-->
<!--this為該dom對象div的引用：該事件綁在div這個元素上琅关，該this就代表div-->
<div id="btn" class="btn" onmouseover="mouseoverFn(this)" onmouseout="mouseoutFn(this)">開始</div>
<!--或者直接把顏色也傳遞過去-->
<div id="btn2" class="btn" onmouseover="mouseoverFn1(this,'#0f0')" onmouseout="mouseoutFn1(this,'#333')">結(jié)束</div>
<script>
function mouseoverFn(btn) {
//鼠標(biāo)劃過按鈕時，按鈕的背景變?yōu)榧t色
//console.log(btn);//<div id="btn" class="btn" onmouseover="mouseoverFn(this)">開始</div>
btn.style.background="#f00";
}
function mouseoutFn(btn) {
btn.style.background="#00f";
}
function mouseoverFn1(btn,bgColor) {
btn.style.background=bgColor;
}
function mouseoutFn1(btn,bgColor) {
btn.style.background=bgColor;
}
</script>
</body>
二、DOM0級事件
語法：ele.事件=執(zhí)行腳本
功能：在DOM對象上綁定事件
說明：執(zhí)行腳本可以是一個匿名函數(shù)涣易，也可以是一個函數(shù)的調(diào)用画机。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.lock{
width: 140px;
height: 30px;
line-height:30px;
background:#00f;
color:#fff;
font-size: 14px;
text-align: center;
border-radius: 10px;
cursor: pointer;
margin-top: 30px;
}
.unlock{
width: 140px;
height: 30px;
line-height:30px;
background:#666;
color:#ccc;
font-size: 14px;
text-align: center;
border-radius: 10px;
cursor: pointer;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="btn" class="lock" >鎖定</div>
<script>
//獲取按鈕
var btn=document.getElementById("btn");
//給按鈕綁定事件
btn.onclick=function(){
//console.log(this);//<div id="btn" class="lock" >鎖定</div>
// this.className="unlock";
// this.innerHTML="解鎖";
//判斷如果按鈕時鎖定，則顯示為解鎖新症，變?yōu)榛疑? //否則顯示為鎖定步氏，變?yōu)樗{色
/* if(this.className=="lock"){
this.className="unlock";
this.innerHTML="解鎖";
}else{
this.className="lock";
this.innerHTML="鎖定";
}*/
//根據(jù)內(nèi)容來判斷
if(this.innerHTML=="鎖定"){
this.className="unlock";
this.innerHTML="解鎖";
}else {
this.className="lock";
this.innerHTML="鎖定";
}
}
//注意：自定義函數(shù)時的調(diào)用
function clickBtn(){
alert("我是按鈕");
}
btn.onclick=clickBtn;//此處調(diào)用不能寫()
</script>
</body>
三、常用的鼠標(biāo)事件與鍵盤事件
1.鼠標(biāo)事件
onload：頁面加載時觸發(fā)
onclick：鼠標(biāo)點擊時觸發(fā)
onmouseover：鼠標(biāo)滑過時觸發(fā)
onmouseout：鼠標(biāo)離開時觸發(fā)
onfoucs：獲得焦點時觸發(fā)
onblur：失去焦點時觸發(fā)
onchange：域的內(nèi)容改變時發(fā)生
onsubmit：表單中的確認(rèn)按鈕被點擊時發(fā)生
onmousedown：鼠標(biāo)按鈕在元素上按下時觸發(fā)
onmousemove：在鼠標(biāo)指針移動時發(fā)生
onmouseup：在元素上松開鼠標(biāo)按鈕時觸發(fā)
onresize：當(dāng)調(diào)整瀏覽器窗口的大小時觸發(fā)
onscroll：拖動滾動條滾動時觸發(fā)
①onload：頁面加載時觸發(fā)
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 頁面加載時執(zhí)行徒爹，unload頁面卸載 把頁面中的所有元素加載完畢再觸發(fā)
window.onload=function(){
// 獲取box
var box=document.getElementById("box");
var clicked=function(){
alert('我被點擊了');
}
box.onclick=clicked;
}
</script>
</head>
<body>
<div id="box">這是一個DIV</div>
</body>
②onfoucs:獲得焦點時觸發(fā) 用于input標(biāo)簽type為text荚醒、password、textarea
③onblur:失去焦點時觸發(fā)
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
padding:50px;
}
.left,.tip{
float:left;
}
.left{margin-right:10px;}
.tip{display:none;font-size:14px;}
</style>
<script>
window.onload=function(){
// 獲取文本框和提示框
var phone=document.getElementById("phone"),
tip=document.getElementById("tip");
// 給文本框綁定激活的事件
phone.onfocus=function(){
// 讓tip顯示出來
tip.style.display='block';
}
// 給文本框綁定失去焦點的事件
phone.onblur=function(){
// 獲取文本框的值,value用于獲取表單元素的值
var phoneVal=this.value;
// 判斷手機號碼是否是11位的數(shù)字
// 如果輸入正確隆嗅，則顯示對號圖標(biāo)界阁，否則顯示錯號圖標(biāo)
if(phoneVal.length==11 && isNaN(phoneVal)==false){
tip.innerHTML='<img src="img/right.png">';
}else{
tip.innerHTML='<img src="img/error.png">';
}
}
}
</script>
</head>
<body>
<div class="box">
<div class="left">
<input type="text" id="phone" placeholder="請輸入手機號碼">
</div>
<div class="tip" id="tip">
請輸入有效的手機號碼
</div>
</div>
</body>
④onchange：域的內(nèi)容改變時發(fā)生
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 頁面加載
window.onload=init;
// 初始化
function init(){
// 獲取下拉菜單
var menu=document.getElementById("menu");
// 給菜單綁定change事件,一般作用域select或checkbox或radio
menu.onchange=function(){
// 獲取當(dāng)前選中的值
//var bgcolor=this.value;
var bgcolor=menu.options[menu.selectedIndex].value;
// 如果bgcolor為空，則下面的腳本將不執(zhí)行
// if(bgcolor=="")return;
// 設(shè)置body的背景色
// 如果bgcolor為空胖喳，則將背景色設(shè)為白色泡躯，否則是選擇的顏色
if(bgcolor==""){
document.body.style.background="#fff";
}else{
document.body.style.background=bgcolor;
}
}
}
</script>
</head>
<body>
<div class="box">
請選擇您喜歡的背景色：
<select name="" id="menu">
<option value="">請選擇</option>
<option value="#f00">紅色</option>
<option value="#0f0">綠色</option>
<option value="#00f">藍色</option>
<option value="#ff0">黃色</option>
<option value="#ccc">灰色</option>
</select>
</div>
</body>
⑤onsubmit：表單中的確認(rèn)按鈕被點擊時發(fā)生
⑥onmousedown：鼠標(biāo)按鈕在元素上按下時觸發(fā)
⑦onmousemove：在鼠標(biāo)指針移動時發(fā)生
⑧onmouseup：在元素上松開鼠標(biāo)按鈕時觸發(fā)
⑨onresize：當(dāng)調(diào)整瀏覽器窗口的大小時觸發(fā)
⑩onscroll：拖動滾動條滾動時觸發(fā)
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{height:2000px;}
.box{width:200px;height:200px;background:#f00;overflow:auto;}
</style>
</head>
<body>
<div class="box" id="box">
<p>拖動</p>
<p>拖動</p>
<p>拖動</p>
<p>拖動</p>
<p>拖動</p>
<p>拖動</p>
<p>拖動</p>
<p>拖動</p>
<p>拖動</p>
<p>拖動</p>
</div>
<script>
var box=document.getElementById("box");
// 綁定按下的事件
box.onmousedown=function(){
console.log("我被按下了");
}
// 綁定移動的事件
box.onmousemove=function(){
console.log("我被移動了");
}
// 綁定松開的事件
box.onmouseup=function(){
console.log("我被松開了");
}
// 綁定點擊的事件
box.onclick=function(){
console.log("我被點擊了");
}
// 瀏覽器窗口尺寸發(fā)生改變時
window.onresize=function(){
console.log("我的尺寸被改變了");
}
// 拖動滾動條
window.onscroll=function(){
console.log("我被拖動了");
}
box.onscroll=function(){
console.log("我是DIV的滾動條");
}
</script>
</body>
2.鍵盤事件與keyCode屬性
onkeydown ：在用戶按下一個鍵盤按鍵時發(fā)生
onkeypress：在鍵盤按鍵被按下并釋放一個鍵時發(fā)生
onkeyup：在鍵盤按鍵被松開時發(fā)生
keyCode：返回onkeypress、onkeydown 或 onkeyup
事件觸發(fā)的鍵的值的字符代碼丽焊，或者的鍵的代碼精续。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.text span{
font-weight: bold;
color: #f00;
}
em{
font-style: normal;
}
</style>
</head>
<body>
<p class="text">您還可以輸入
<span>
<em id="count">30</em>/30
</span>
</p>
<div class="input">
<textarea name="" id="text" cols="70" rows="4"></textarea>
</div>
<script>
//獲取文本框的值
var text=document.getElementById("text");
//在事件觸發(fā)的function里，用一個參數(shù)接受事件對象
// document.onkeydown=function (ev) {
// console.log(ev.keyCode);
// }
var total=30;
//綁定鍵盤事件
var count=document.getElementById("count");
document.onkeyup=function (ev) {
//獲取文本框的值的長度
var len=text.value.length;
var allow=total-len;
count.innerHTML=allow;
}
</script>
</body>
四粹懒、this的指向
在事件觸發(fā)的函數(shù)中，this是對該DOM對象的引用顷级。
