DOM的三大事件 ：1.滑鼠事件 2.鍵盤事件 3.HTML事件
1.滑鼠事件 click ：單擊 dblclick ：雙擊 mousedown：按下滑鼠 mousepress：按下到鬆開滑鼠的過程 mouseup ：鬆開滑鼠 mouseove：滑鼠移到什麼上 mouseout：滑鼠從哪移開 mousemove：移動滑鼠 mouseenter：滑鼠進入 mouseleave：滑鼠離開 <body> <button
onclick ="myClick()">單擊顯示內容</button> <button
ondblclick ="myDBclick()">雙擊顯示內容</button> <button
onmousedown ="myMousedown()"
onmouseup ="myMouseup()">按下和鬆開滑鼠顯示內容</button> <button
onmouseover ="myMouseover()"
onmouseout ="myMouseout()">移到和移開button上顯示內容</button> <button
onmousemove ="myMousemove()">移動滑鼠顯示內容</button> <button
onmouseente
r ="myMouseEnter()"
onmouseleave ="myMouseLeave()">滑鼠進入和離開</button> </body> <script> function myClick() { console.log("你單擊了按鈕"); } function myDBclick() { console.log("你雙擊了按鈕"); } function myMousedown() { console.log("你按下了滑鼠"); } function myMouseup() { console.log("你鬆開了了滑鼠"); } function myMouseover() { console.log("你把滑鼠移到了按鈕上"); } function myMouseout() { console.log("你移開了滑鼠"); } function myMousemove() { console.log("你移動了滑鼠"); } function myMouseEnter() { console.log("滑鼠進入。") } function myMouseLeave() { console.log("滑鼠離開。") } </script>
2.鍵盤事件 keydown：按下鍵盤 mousepress：按下到鬆開按鍵的過程 keyup：鬆開按鍵
（1）將輸入的小寫字母轉化為大寫字母 <body> <input id="name" type="text"
onkeydown ="myKeyDown(
this.id) "
onkeyup ="myKeyUp(
this.id) "> </body> <script> /*輸出輸入的字元*/ function myKeyDown(id) { console.log(document.getElementById(id).value); } /*按鍵結束，字型轉換為大寫*/ function myKeyUp(id) { var text = document.getElementById(id).value; document.getElementById(id).value = text.toUpperCase(); }
（2）根據鍵盤按鍵數字代碼如何轉化為按鍵實際意義區分瀏覽器 /*
onkeydown：不區分大小寫 */ document.onkeydown = function (event) { var code = 0; if(
window.event ){
code = event.keyCode; /*IE chrome*/ }else {
code = event.which; /*W3c標準* / } if(code == 37){ console.log("左鍵") }else if(code == 38){ console.log("上鍵") }else if(code == 39){ console.log("右鍵") }else if(code == 40){ console.log("下鍵") } console.log(event.keyCode); } /*
onkeypress ：區分大小寫 */ window.onkeypress = function (event) { console.log(event.keyCode) } </script>
3.HTML事件 load ： 文檔載入完畢 Select ：選擇常值內容 Change ：改變內容 Focus ：獲得游標 resize ：網頁視窗變化 scroll ： 捲軸滾動 <div style="height: 5000px"> <input id="name" type="text" onselect="mySelect(this.id)"> <input id="name2" type="text" onchange="myChange(this.id)"> <input id="name3" type="text" onfocus="myFocus(this.id)"> </div> </body> <script>
window.onload = function () { console.log("文檔載入完畢。"); }; function mySelect(id) {
var text = document.getElementById(id).value; console.log(text); } function myChange(id) {
var text = document.getElementById(id).value; console.log(text); } function myFocus() { console.log("獲得游標") }
window.onresize = function () { console.log("視窗變化。") }
window.onscroll = function () { console.log("捲軸滾動") } </script>
DOM之事件模型：指令碼模型
內聯模型
動態綁定 <body> <!--行內綁定：指令碼模型--> <button
onclick="javascrpt:alert('Hello')" >Hello1</button> <!--內聯模型--> <button
onclick="showHello()" >Hello2</button> <!--動態綁定--> <button
id="btn3" >Hello3</button> </body> <script> /*
DOM0：同一個元素，同類事件只能添加一個，如果添加多個，
* 後面添加的會覆蓋之前添加的 */ function shoeHello() { alert("Hello"); } var btn3 = document.getElementById("btn3"); btn3.onclick = function () { alert("Hello"); } /*
DOM2:可以給同一個元素添加多個同類事件* / btn3.addEventListener("click",function () { alert("hello1"); }); btn3.addEventListener("click",function () { alert("hello2"); }) if (btn3.attachEvent){ /*IE*/ btn3.attachEvent("oncli
