Javascript基礎與物件導向基礎~第六講 Javascript中的事件機制

文章目錄

• JS中的主要事件說明
• JS中事件的調用方式

回到目錄

事件機制，在JS中感覺很容易讓人接受，一個滑鼠被按下時會發生一些事情，一個鍵盤的鍵被抬起時同樣可以發生一些事情，這種比喻很容易讓人接受，不是嗎，呵呵。

下面我將JS中幾個主要的事件說一下，然後再說一下觸發事件的幾個方法。

JS中的主要事件說明

以下是我們在項目開發中常用到的事件，紅色的為最常用的事件，呵呵

onclick 滑鼠點擊某個對象

ondblclick 滑鼠雙擊某個對象

onerror 當載入文檔或映像時發生某個錯誤

onfocus元素獲得焦點

onkeydown某個鍵盤的鍵被按下

onkeypress某個鍵盤的鍵被按下或按住

onkeyup某個鍵盤的鍵被鬆開

onload某個頁面或映像被完成載入

onmousedown某個滑鼠按鍵被按下

onmousemove滑鼠被移動

onmouseout滑鼠從某元素移開

onmouseover滑鼠被移到某元素之上

onmouseup 某個滑鼠按鍵被鬆開

onselect 文本被選定

onsubmit 提交按鈕被點擊

onunload 使用者退出頁面

JS中事件的調用方式

一 在HTML標記中直接指定事件，代碼如下：

 <script type="text/javascript">        //onclick事件指向的方法        function clickFun() {            alert("誰觸發了我，單擊事件");        }        //onerror事件指向的方法        function imgErrorFun(o) {            o.src = "http://static.googleadsserving.cn/pagead/imgad?id=CICAgICQk9vj-gEQeBjYBDIIImM2eyikBWY";        }        //滑鼠移入        function overFun(o) {            o.style.background = "red";        }        //滑鼠移出        function outFun(o) {            o.style.background = "#fff";        }    </script>

二 直接在JS代碼塊中動態為元素分配事件

 window.onload = function () {             document.getElementById("haha").onclick = function () { alert("誰觸發了我，單擊事件"); }             document.getElementById("haha").onclick = function () { clickFun(); }        }

事實上，使用純JS去實現一些頁面中的效果是沒有問題的，但是在使用上確實不方便，所以目前出現了很多流行的，相容性好的，使用方便的JS類庫，如JQ，prototype,ExtJS等等！

好了，時間不早了，今天的JS事件內容就講到這裡吧，沒什麼難的東西都是實驗性的，自己寫寫就有了，呵呵 。

感謝您的閱讀！

回到目錄