JavaScript事件是由訪問Web頁面的用戶引起的一系列操作;
例如:用戶點擊;當用戶執行某些操作的時候,再去執行一系列代碼;

一 事件介紹

?事件一般是用于瀏覽器和用戶操作進行交互;最早是IE和Netscape Navigator中出現,作為分擔服務器端元算負載的一種手段;
?而DOM2級規范開始嘗試以一種符合邏輯的方式標準化DOM事件;
?IE9/Firefox/Opera/Safari和Chrome全部已經實現了"DOM2級事件"模塊的核心部分;
?IE8之前瀏覽器仍然使用其專有事件模型;
?JavaScript有三種事件模型:內聯模型/腳本模型和DOM2模型;

二 內聯模型(HTML事件處理程序)?

這種模型是最傳統的簡單的一種處理事件的方法;
在內聯模型中,事件處理函數是HTML標簽的一個屬性,用于處理指定事件;
雖然內聯在早期使用較多,但它是和HTML混寫的,并沒有與HTML分離;

在HTML中把事件處理函數作為屬性執行JS代碼;
< input type="button" value="按鈕" οnclick="alert('Lee');" /> 注意單雙引號;
在HTML中把事件處理函數作為屬性執行JS函數;
< input type="button" value="按鈕" οnclick="box();" /> 執行JS的函數;
PS:函數不得放到window.onload里面,這樣就看不見了;?

三 腳本模型(DOM0級事件處理程序)

?

?

1 2 3 4 5 6 7 8 9 10

// 由于內聯模型違反了HTML和JavaScript代碼層次分離的原則; // 我們可以在JavaScript中處理事件,這種處理方式就是腳本模型; ??var input = document.getElementsByTagName('input')[0];???? // 得到input對象; ??input.onclick = function(){????????????????? // 匿名函數執行; ????alert('Lee');????????????? ??} ??// PS:通過匿名函數,可以直接觸發對應的代碼; ??//? 也可以通過指定的函數名賦值的方式來執行函數(賦值的函數名不要跟括號); ??input.onclick = box;????????????????????? // 把匿名函數賦值給事件處理函數; ??input.onclick = null;???????????????????? // 刪除事件處理程序;

? 四 事件處理函數

? // JavaScript可以處理的事件類型為:鼠標事件/鍵盤事件/HTML事件;
JavaScript事件處理函數及其使用列表
事件處理函數 影響的元素 何時發生
onabort 圖像 當圖像加載被中斷時;
onblur 窗口/框架/所有表單對象 當焦點從對象上移開時;
onchange 輸入框/選擇框/文本域 當改變一個元素的值且失去焦點時;
onclick 鏈接/按鈕/表單對象/圖像等 當用戶單擊對象時;
ondblclick 鏈接/按鈕/表單對象 當用戶雙擊對象時;
ondragdrop 窗口 當用戶將一個對象拖放到瀏覽器窗口時;
onError 窗口/框架/所有表單對象 當腳本中發生語法錯誤時;
onfocus 窗口/框架/所有表單對象 當單擊鼠標或將鼠標移動聚焦到窗口或框架時;
onkeydown 文檔/圖像/鏈接/表單 當按鍵被按下時;
onkeypress 文檔/圖像/連接/表單 當按鍵被按下然后松開時;
onkeyup 文檔/圖像/鏈接/表單 當按鍵被松開時;
onload 主體/框架集/圖像 文檔或圖像加載后;
onunload 主體/框架集 文檔或框架集卸載后;
onmouseout 鏈接 當圖標移除鏈接時;
onmouseover 鏈接 當鼠標移到鏈接時;
onmove 窗口 當瀏覽器窗口移動時;
onreset 表單復位按鈕 單擊表單的reset按鈕;
onresize 窗口 當改變瀏覽器窗口大小時;
onselect 表單元素 當選擇一個表單對象時;
onsubmit 表單 當發送表格到服務器時;
// PS:對于每一個事件,它都有自己的觸發范圍和方式,事件處理將失效;

1.鼠標事件,頁面所有元素都可觸發

(1).click:當用戶單擊鼠標按鈕或按下回車鍵時觸發;
??? input.onclick = function(){
??????? alert('Lee');
??? };

(2).dblclick:當用戶雙擊鼠標按鈕時觸發;
??? input.ondblclick = function(){
??????? alert('Lee');
??? }

(3).mousedown:當用戶按下鼠標還未彈起時觸發;
??? input.onmousedown = function(){
??????? alert('Lee');
??? }

(4)mouseup:當用戶釋放鼠標按鈕時觸發;
??? input.onmouseup = function(){
??????? alert('Lee');
??? }

(5).mouseover:當鼠標移到某個元素上方時觸發;
??? input.onmouseover = function(){
??????? alert('Lee');
??? }

(6).mouseout:當鼠標移出某個元素上方時觸發;
??? input.onmouseout = function(){
??????? alert('Lee');
??? }

(7).mousemove:當鼠標指針在元素上移動時觸發;
??? input.onmousemove = function(){
??????? alert('Lee');
??? }

2.鍵盤事件

?(1).keydown:當用戶按下鍵盤上任意鍵觸發,如果按住不放,會重復觸發;
??? onkeydown = function(){
??????? alert('Lee');
??? }

(2).keypress:當用戶按下鍵盤上的字符鍵觸發,如果按住不放,會重復觸發;
??? onkeypress = function(){
??????? alert('Lee');
??? }

(3).keyup:當用戶釋放鍵盤上的鍵觸發;
??? onkeyup = function(){
??????? alert('Lee');
??? }

3.HTML事件

(1).load:當頁面完全加載后(包括所有圖像/JavaScript文件/CSS文件等外部資源),就會觸發window上面的load事件;
window.onload = function(){
alert('Lee');
}

// 圖像上面也可以觸發load事件,無論是在DOM中的圖像元素還是HTML中的圖像元素;
// 因此可以在HTML中為任何圖像指定onload事件處理程序;
< img src='smile.client.gif' οnlοad="alert('Image loaded.')" >
// PS:新圖像元素不一定是從添加到文檔后才開始下載,只要設置src屬性就會開始下載;

// <script>元素也會觸發load事件,以便開發人員確定動態加載的JavaScript文件是否加載完畢;
// 與圖像不同,只有在設置了<script>元素的src屬性并將該元素添加到文檔后,才會開始下載JavaScript文件;

?(2).unload:當文檔被完全卸載后觸發;
?// 只要用戶從一個頁面切換到另一個頁面,就會發生unload事件;
?// 而利用這個事件最多的情況是清除引用,以避免內存泄漏;
???? window.onunload = function(){
???????? alert('Lee');
???? }
(3).select:當用戶選擇文本框(input或textarea)內容改變且失去焦點后觸發;
???? input.onselect = function(){
???????? alert('Lee');
???? }
(4).change:當文本框(input或textarea)內容改變且失去焦點后觸發;
???? input.onchange = function(){
???????? alert('Lee');
???? }
(5).focus:當頁面或元素獲得焦點時在window及相關元素上面觸發;這個事件不會冒泡;
???? input.onfocus = function(){
???????? alert('Lee');
???? }
(6).blur:當頁面或元素失去焦點時在window及相關元素上觸發;這個事件不會冒泡;
???? input.onblur = function(){
???????? alert('Lee');
???? }
(7).submit:當用戶點擊提交按鈕在<form>元素上觸發;
???? form.onsubmit = function(){
???????? alert('Lee');
???? }

(8).reset:當用戶點擊重置按鈕在<form>元素上觸發;
??? form.onreset = function(){
??????? alert('Lee');
??? }

(9).resize:當瀏覽器窗口被調整到一個新的高度或寬度時,就會觸發resize事件;

// 這個事件在window(窗口)上觸發;瀏覽器窗口最大化或最小化也會觸發resize事件;
// IE/Safari/Chrome和Opera會在瀏覽器變化時不斷觸發resize事件;
// Firefox則只會在用戶停止調整窗口大小時才會觸發resize事件;
??? window.onresize = function(){
??????? alert('Lee');
??? }

(10).scroll:當用戶滾動滾動條的元素使觸發;
??? window.onscroll = function(){
??????? alert('Lee');
??? }

總結

以上是生活随笔為你收集整理的JavaScript 事件入门知识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。