回到目錄

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

下面我將JS中幾(ji)個主(zhu)要的事件(jian)說一下，然后再說一下觸發事件(jian)的幾(ji)個方法(fa)。

JS中的主要事件說明

以下是我們(men)在(zai)項目開發(fa)中常(chang)用到的事件，紅色的為最常(chang)用的事件，呵(he)呵(he)

onclick 鼠標點擊某個對象

ondblclick 鼠標雙擊某個(ge)對象

onerror 當加載文檔或(huo)圖像時發生(sheng)某(mou)個錯誤(wu)

onfocus元素(su)獲得焦點

onkeydown某個鍵(jian)盤(pan)的鍵(jian)被(bei)按下(xia)

onkeypress某個鍵盤的鍵被(bei)按下或按住

onkeyup某個(ge)鍵盤的鍵被松(song)開

onload某(mou)個頁(ye)面或(huo)圖像(xiang)被完成加載

onmousedown某個鼠標按鍵(jian)被按下

onmousemove鼠標被移(yi)動

onmouseout鼠標從某元(yuan)素移(yi)開

onmouseover鼠標(biao)被移到某元素之(zhi)上

onmouseup 某個鼠標按鍵(jian)被松開

onselect 文(wen)本被(bei)選(xuan)定

onsubmit 提交按鈕被點(dian)擊

onunload 用戶退出頁(ye)面

JS中事件的調用方式

一 在HTML標記中直接指(zhi)定事(shi)件，代碼(ma)如下：

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

二 直接在(zai)JS代碼塊中動態為元(yuan)素分配(pei)事件(jian)

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

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

好了，時間不早了，今天(tian)的JS事(shi)件(jian)內容就講到(dao)這里(li)吧，沒什(shen)么難的東(dong)西都是實驗性(xing)的，自己寫寫就有了，呵(he)呵(he) 。

感謝您的閱讀！

回到目錄