js DOM事件
阿新 • • 發佈：2018-06-25
使用 meta chang onmouseup orm down res 失去 代碼
事件的綁定
1-1 html事件
直接在html元素標簽內添加事件，執行腳本
語法：<tag 事件=“執行腳本”></tag>
this指向
在事件觸發的函數中，this是對該dom對象的引用
1-2 DOM 0級事件
DOM 0級事件
1.通過dom獲取html元素
2.(獲取html元素).事件=執行腳本
說明：
執行腳本可以是封裝好的函數，也可以是匿名函數
註意：點擊按鈕,調用clickBtn這個函數，調用時函數名後不要帶(),否則當頁面刷新時也會觸發這個函數
//獲取按鈕
btn=document.getElementById("btn");
function clickBtn() {
alert("我是按鈕")
}
//****點擊按鈕 調用clickBtn這個函數，調用時函數名後不要帶(),否則當頁面刷新時也會觸發
btn.onclick=clickBtn;
不建議使用html事件原因：
1.多元素綁定相同事件時，效率低
2.不建議在thml元素中寫Js代碼
事件類型
2-1 事件類型-onload
鼠標事件
onload :頁面加載時觸發
onclick：鼠標點擊時觸發
onmouseover:鼠標滑過時觸發
onmouseout:鼠標離開時觸發
onblur：失去焦點時觸發
onchange：域內容改變時發生
onload
onload 作用在window上，當頁面加載完成後觸發
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onload 頁面加載事件</title>
<script>
//頁面加載時執行，unload 頁面卸載不常用
window.onload=function () {
//獲取box
var box=document.getElementById("box")
box.onclick=function () {
alert("wo 被點擊了")
}
}
</script>
<!--報錯：Cannot set property ‘onclick‘ of null-->
<!--原因：腳本是從上往下執行，當代碼執行到獲取box時，找不到box-->
<!--解決：將js放在div後邊或者使用wondow.onload-->
</head>
<body>
<div id="box">這是一個div</div>
</body>
</html>
2-2事件類型-onfocus和onblur
onfocus用於
input標簽type為text、password
textarea標簽
2-3事件類型-onchange
一般用於select 元素
或者單選按鈕（radio）或復選框（checkbox）
2-4事件類型-onresize和onscroll
onsubmit :表單中的確認按鈕被點擊時發生 不是加在按鈕上的，是加在form表單上的
onmousedown：鼠標按鈕在元素上按下時觸發
onmousemove：在鼠標指針移動時發生
onmouseup：在元素上松開鼠標按鈕時觸發
onresize：當調整瀏覽器窗口大小時觸發
onscroll：拖動滾動條時觸發
鍵盤事件與keyCode屬性
onkeydown：在用戶按下一個鍵盤按鍵時發生
onkeypress：在鍵盤被按下並釋放一個鍵時發生
onkeyup：在鍵盤按鍵被松開時發生
keyCode屬性
返回以上三個事件觸發時鍵的值的字符代碼，或鍵的代碼
js DOM事件