<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件入門</title>
</head>
<body>
<form>
<input type="submit" value="提交" >
</form>
<input type="text" value="文本" >
<input type="button" value="按鈕" οnclick="alert('已經提交了')">
</body>
<script>
//鼠標事件
var input=document.getElementsByTagName("input")[0];
// input.οnclick=function(){ alert('Lee');};
// input.οndblclick=function(){ alert('Lee');};
// input.οnmοusedοwn=function() { alert('Lee');};
// input.οnmοuseup=function(){ alert('Lee'); };
// input.οnmοuseοver=function(){ alert('Lee');};
// input.οnmοuseοut=function(){ alert('Lee'); };
// input.οnmοusemοve=function() { alert('Lee');};
//鍵盤事件
// οnkeydοwn=function(){ alert('Lee'); };
// οnkeypress= function(){ alert('Lee'); };
// οnkeyup=function() { alert('Lee'); };
//HTM事件
// window.οnlοad=function() { alert('Lee');};
var input=document.getElementsByTagName("input")[1];
// input.οnselect=function(){ alert('Lee');};
// input.οnchange=function(){ alert('Lee');};
// input.οnfοcus= function(){ alert('Lee');};
// input.οnblur=function(){ alert('Lee'); };
var form=document.getElementsByTagName("form")[0];
// form.οnsubmit=function(){ alert('Lee'); };
// window.οnscrοll=function() { alert('Lee');};
/*
內聯模型：
這種是最傳統接單的一種處理事件的方法。在內聯模型中，事件處理函數是 HTML 標籤的一個屬性，用於處理指定事件。雖然內聯在早期使用較多，但它是和 HTML 混寫的， 並沒有與 HTML 分離。
//在 HTML 中把事件處理函數作爲屬性執行 JS 代碼
<inputtype="button"value="按鈕"οnclick="alert('哈哈哈');" /> //注意單雙引號
//在 HTML 中把事件處理函數作爲屬性執行 JS 函數
function box(){
alert("我被點擊了")
};
<input type="button"value="按鈕"οnclick="box();" /> //執行 JS 的函數
PS：函數不得放到 window.onload 裏面，這樣就形成閉包看不見了。
腳本模型：
由於內聯模型違反了 HTML 與 JavaScript 代碼層次分離的原則。爲了解決這個問題，我 們可以在 JavaScript 中處理事件。這種處理方式就是腳本模型。
var input=document.getElementsByTagName("input")[0];
//對象.事件處理函數.函數名或者匿名函數
input.οnclick=function(){
alert("你點擊了")
}；
function box(){
alert("你點擊了");
};
input.onclick = box; //box( );
通過賦值的方式，讓事件處理函數執行一個函數，box( )賦值時box後面不能加（），否則就自動執行了。
JavaScript 可以處理的事件類型爲：鼠標事件、鍵盤事件、HTML 事件：
1.鼠標事件，頁面所有元素都可觸發
click：當用戶單擊鼠標按鈕或按下回車鍵時觸發。 input.οnclick=function(){ alert('Lee');};
dblclick：當用戶雙擊主鼠標按鈕時觸發。 input.οndblclick=function(){ alert('Lee'); };
mousedown：當用戶按下了鼠標還未彈起時觸發。 input.οnmοusedοwn=function() { alert('Lee');};
mouseup：當用戶釋放鼠標按鈕時觸發。 input.οnmοuseup=function(){ alert('Lee');};
mouseover：當鼠標移到某個元素上方時觸發。 input.οnmοuseοver=function(){ alert('Lee');};
mouseout：當鼠標移出某個元素上方時觸發。 input.οnmοuseοut=function(){ alert('Lee'); };
mousemove：當鼠標指針在元素上移動時觸發。 input.οnmοusemοve=function() { alert('Lee');};
2.鍵盤事件
keydown：當用戶按下鍵盤上任意鍵觸發，如果按住不放，會重複觸發。οnkeydοwn=function(){ alert('Lee');};
keypress：當用戶按下鍵盤上的字符鍵觸發，如果按住不放，會重複觸發。 οnkeypress= function(){ alert('Lee');};
keyup：當用戶釋放鍵盤上的鍵觸發。 οnkeyup=function() { alert('Lee'); };
3.HTM事件
load：當頁面完全加載後在 window 上面觸發，或當框架集加載完畢後在框架集上觸發。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件入門</title>
</head>
<body>
<form>
<input type="submit" value="提交" >
</form>
<input type="text" value="文本" >
<input type="button" value="按鈕" οnclick="alert('已經提交了')">
</body>
<script>
//鼠標事件
var input=document.getElementsByTagName("input")[0];
// input.οnclick=function(){ alert('Lee');};
// input.οndblclick=function(){ alert('Lee');};
// input.οnmοusedοwn=function() { alert('Lee');};
// input.οnmοuseup=function(){ alert('Lee'); };
// input.οnmοuseοver=function(){ alert('Lee');};
// input.οnmοuseοut=function(){ alert('Lee'); };
// input.οnmοusemοve=function() { alert('Lee');};
//鍵盤事件
// οnkeydοwn=function(){ alert('Lee'); };
// οnkeypress= function(){ alert('Lee'); };
// οnkeyup=function() { alert('Lee'); };
//HTM事件
// window.οnlοad=function() { alert('Lee');};
var input=document.getElementsByTagName("input")[1];
// input.οnselect=function(){ alert('Lee');};
// input.οnchange=function(){ alert('Lee');};
// input.οnfοcus= function(){ alert('Lee');};
// input.οnblur=function(){ alert('Lee'); };
var form=document.getElementsByTagName("form")[0];
// form.οnsubmit=function(){ alert('Lee'); };
// window.οnscrοll=function() { alert('Lee');};
/*
內聯模型：
這種是最傳統接單的一種處理事件的方法。在內聯模型中，事件處理函數是 HTML 標籤的一個屬性，用於處理指定事件。雖然內聯在早期使用較多，但它是和 HTML 混寫的， 並沒有與 HTML 分離。
//在 HTML 中把事件處理函數作爲屬性執行 JS 代碼
<inputtype="button"value="按鈕"οnclick="alert('哈哈哈');" /> //注意單雙引號
//在 HTML 中把事件處理函數作爲屬性執行 JS 函數
function box(){
alert("我被點擊了")
};
<input type="button"value="按鈕"οnclick="box();" /> //執行 JS 的函數
PS：函數不得放到 window.onload 裏面，這樣就形成閉包看不見了。
腳本模型：
由於內聯模型違反了 HTML 與 JavaScript 代碼層次分離的原則。爲了解決這個問題，我 們可以在 JavaScript 中處理事件。這種處理方式就是腳本模型。
var input=document.getElementsByTagName("input")[0];
//對象.事件處理函數.函數名或者匿名函數
input.οnclick=function(){
alert("你點擊了")
}；
function box(){
alert("你點擊了");
};
input.onclick = box; //
通過賦值的方式，讓事件處理函數執行一個函數，
JavaScript 可以處理的事件類型爲：鼠標事件、鍵盤事件、HTML 事件：
1.鼠標事件，頁面所有元素都可觸發
click：當用戶單擊鼠標按鈕或按下回車鍵時觸發。 input.οnclick=function(){ alert('Lee');};
dblclick：當用戶雙擊主鼠標按鈕時觸發。 input.οndblclick=function(){ alert('Lee'); };
mousedown：當用戶按下了鼠標還未彈起時觸發。 input.οnmοusedοwn=function() { alert('Lee');};
mouseup：當用戶釋放鼠標按鈕時觸發。 input.οnmοuseup=function(){ alert('Lee');};
mouseover：當鼠標移到某個元素上方時觸發。 input.οnmοuseοver=function(){ alert('Lee');};
mouseout：當鼠標移出某個元素上方時觸發。 input.οnmοuseοut=function(){ alert('Lee'); };
mousemove：當鼠標指針在元素上移動時觸發。 input.οnmοusemοve=function() { alert('Lee');};
2.鍵盤事件
keydown：當用戶按下鍵盤上任意鍵觸發，如果按住不放，會重複觸發。οnkeydοwn=function(){ alert('Lee');};
keypress：當用戶按下鍵盤上的字符鍵觸發，如果按住不放，會重複觸發。 οnkeypress= function(){ alert('Lee');};
keyup：當用戶釋放鍵盤上的鍵觸發。 οnkeyup=function() { alert('Lee'); };
3.HTM事件
load：當頁面完全加載後在 window 上面觸發，或當框架集加載完畢後在框架集上觸發。
window.οnlοad=function() { alert('Lee'); };;
select：當用戶選擇文本框(input 或 textarea)中的一個或多個字符觸發。
select：當用戶選擇文本框(input 或 textarea)中的一個或多個字符觸發。
input.οnselect=function(){ alert('Lee'); };
change：當文本框(input 或 textarea)內容改變且失去焦點後觸發。 input.οnchange=function(){ alert('Lee');};
focus：當頁面或者元素獲得焦點時在 window 及相關元素上面觸發。 input.οnfοcus= function(){ alert('Lee');};
blur：當頁面或元素失去焦點時在 window 及相關元素上觸發。 input.οnblur=function(){ alert('Lee');};
submit：當用戶點擊提交按鈕在<form>元素上觸發。 form.οnsubmit=function(){ alert('Lee');};
scroll：當用戶滾動帶滾動條的元素時觸發。 window.οnscrοll=function() { alert('Lee');};
*/
</script>
</html>
change：當文本框(input 或 textarea)內容改變且失去焦點後觸發。 input.οnchange=function(){ alert('Lee');};
focus：當頁面或者元素獲得焦點時在 window 及相關元素上面觸發。 input.οnfοcus= function(){ alert('Lee');};
blur：當頁面或元素失去焦點時在 window 及相關元素上觸發。 input.οnblur=function(){ alert('Lee');};
submit：當用戶點擊提交按鈕在<form>元素上觸發。 form.οnsubmit=function(){ alert('Lee');};
scroll：當用戶滾動帶滾動條的元素時觸發。 window.οnscrοll=function() { alert('Lee');};
*/
</script>
</html>