慕課前端入門-DOM事件
阿新 • • 發佈：2020-09-15
1. html事件
- onload:頁面載入時觸發
- onclick:滑鼠點選時觸發
- onmouseover:滑鼠劃過時觸發
- onmouseout:滑鼠離開時觸發
- onfocus:獲得焦點時觸發
- onchange:域的內容改變時發生
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .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('我是按鈕')"> <!-- 指定滑鼠滑過和離開時呼叫的方法 給按鈕繫結事件，this是對該DOM元素的引用--> <div id="btn" class="btn" onmouseover="mouseoverFn(this,'#f00')" onmouseout="mouseoutFn(this,'#ff0')">開始</div> <div id="btn" class="btn" onmouseover="mouseoverFn(this,'#0f0')" onmouseout="mouseoutFn(this,'#333')">開始</div> </body> </html> <script type="text/javascript"> function mouseoverFn(obj, bgColor) { obj.style.backgroundColor=bgColor; } function mouseoutFn(obj, bgColor){ obj.style.backgroundColor=bgColor; } </script>
不建議使用html：
- 1.多元素繫結相同事件時，效率低
- 2.不建議在html中寫JS程式碼
2.DOM0級事件
1.通過DOM獲取html元素
2.html元素.事件=方法，注意這裡的方法不能加()
//語法
ele.事件=執行指令碼
//功能：在DOM物件上繫結事件。說明：執行指令碼可以是一個匿名函式，也可以是一個函式的呼叫
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .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> </body> </html> <script type="text/javascript"> //獲取按鈕 var btn = document.getElementById("btn"); //給按鈕繫結事件，this是對該DOM元素的引用 btn.onclick=function(){ //判斷如果按鈕時鎖定，則顯示為解鎖，變為灰色；否則顯示為鎖定，變為藍色。 if(this.className=="lock"){//this.innerHTML=="鎖定" this.className = "unlock"; this.innerHTML="解鎖"; }else{ this.className = "lock"; this.innerHTML="鎖定"; } } </script>