本篇內(nèi)容介紹了“JavaScript事件類型怎么使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

“專業(yè)、務實、高效、創(chuàng)新、把客戶的事當成自己的事”是我們每一個人一直以來堅持追求的企業(yè)文化。 創(chuàng)新互聯(lián)是您可以信賴的網(wǎng)站建設服務商、專業(yè)的互聯(lián)網(wǎng)服務提供商! 專注于成都網(wǎng)站制作、成都網(wǎng)站建設、外貿(mào)營銷網(wǎng)站建設、軟件開發(fā)、設計服務業(yè)務。我們始終堅持以客戶需求為導向，結合用戶體驗與視覺傳達，提供有針對性的項目解決方案，提供專業(yè)性的建議，創(chuàng)新互聯(lián)建站將不斷地超越自我，追逐市場，引領市場！

在JavaScript中，事件類型指的是事件的觸發(fā)方式，簡單理解就是觸發(fā)了什么事件；事件類型有：UI事件、焦點事件、鼠標與滾輪事件、鍵盤與文本事件、復合事件、變動事件、HTML5事件、設備事件、觸摸與手勢事件等。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

事件是指可以被JavaScript偵測到的行為，是一種“觸發(fā)-響應”的機制。這些行為指的就是頁面的加載、鼠標的單擊/雙擊、鼠標指針滑某個區(qū)域等具體的動作，它對實現(xiàn)頁面的交互效果起著非常重要的作用。

事件由事件源、事件類型和事件處理程序3部分構成，又被稱為“事件三要素”。

• 事件源：觸發(fā)(被)事件的元素

• 事件類型：事件的觸發(fā)方式(例如鼠標點擊或鍵盤點擊)

• 事件處理程序：事件觸發(fā)后要執(zhí)行的代碼(函數(shù)形式)

以上的三個要素可以簡單理解為“誰觸發(fā)了事件”、“觸發(fā)了什么事件”、“觸發(fā)了事件之后要做什么”。

Web瀏覽器中可能發(fā)生的事件有很多類型。這里我將主要將下面幾種常用的事件類型：

• UI事件

• 焦點事件

• 鼠標與滾輪事件

• 鍵盤與文本事件

• 復合事件

• 變動事件

• HTML5事件

• 設備事件

• 觸摸與手勢事件

第一部分：UI事件

UI事件中UI即(User Interface,用戶界面)，當用戶與頁面桑拿的元素交互時觸發(fā)。

　　UI事件中主要包括load,unload,abort,error,select,resize,scroll事件。

1.load事件

　　　此事件為當頁面完全加載完之后（包括所有的圖像、js文件、css文件等外部資源），就會觸發(fā)window上面的load事件。

　　　這個事件是JavaScript中最常用的事件，比如我們經(jīng)常會使用window.onload=function(){};這種形式，即當頁面完全加載完之后執(zhí)行其中的函數(shù)。

  另外，之前一直都不知道，這個事件還可以用在其他元素上，比如圖像元素，如下所示：

　　　即當圖片完全加載出來之后會有彈窗。當然也可以使用JS來實現(xiàn)，如下所示：

var img=document.getElementById("img");
EventUtil.addHandler(img,"load",function(){
      event=EventUtil.getEvent(event);
      alert(EventUtil.getTarget(event).src);
});

2.unload事件

　　　顯然，這個事件是與load事件相對的。在文檔被完全卸載后觸發(fā)。用戶從一個頁面切換到另一個頁面就會觸發(fā)unload時間。利用這個事件最多的情況是清楚引用，避免內(nèi)存泄漏。

這個事件同樣有兩種方式來指定。一種是JavaScript方式，使用EventUtil.addHandler()；另一種就是在body元素中添加一個特性。

  值得注意的是，一定要小心編寫onload事件中的代碼，因為它是在頁面卸載后才觸發(fā)，所以說頁面加載后存在的那些對象，在onload觸發(fā)之后就不一定存在了！

3.resize事件

　　  當調整瀏覽器的窗口到一個新的寬度或高度時，就會觸發(fā)resize事件。這個事件在window（窗口）上面觸發(fā)。因此同樣可以通過JS或者body元素中的onresize特性來指定處理程序。

 寫了這句代碼，那么瀏覽器的大小發(fā)生改變時就會彈出窗口。

4.scroll事件

　　這個事件會在文檔被滾動期間重復被觸發(fā)，所以應當盡量保持事件處理程序的代碼簡單。

第二部分：焦點事件

焦點事件會在頁面元素獲得或失去焦點時觸發(fā)。主要有下面幾種：

• blur   在元素失去焦點時觸發(fā)。這個事件不冒泡，所有瀏覽器都支持。

• focus   在元素獲得焦點時觸發(fā)。這個事件不冒泡，所有瀏覽器都支持。

• focusin  在元素獲得焦點時觸發(fā)。這個事件冒泡,某些瀏覽器不支持。

• focusout 在元素失去焦點時觸發(fā)。這個事件冒泡，某些瀏覽器不支持。

注意：即使blur和focus不冒泡，也可以在捕獲階段偵聽到他們。

第三部分：鼠標與滾輪事件

鼠標事件是Web開發(fā)中最常用的一類事件，因為鼠標是最主要的定位設備。

• click---用戶單擊鼠標左鍵或按下回車鍵觸發(fā)

• dbclick---用戶雙擊鼠標左鍵觸發(fā)。

• mousedown---在用戶按下了任意鼠標按鈕時觸發(fā)。

• mouseenter---在鼠標光標從元素外部首次移動到元素范圍內(nèi)時觸發(fā)。此事件不冒泡。

• mouseleave---元素上方的光標移動到元素范圍之外時觸發(fā)。不冒泡。

• mousemove---光標在元素的內(nèi)部不斷的移動時觸發(fā)。

• mouseover---鼠標指針位于一個元素外部，然后用戶將首次移動到另一個元素邊界之內(nèi)時觸發(fā)。

• mouseout---用戶將光標從一個元素上方移動到另一個元素時觸發(fā)。

• mouseup---在用戶釋放鼠標按鈕時觸發(fā)。

注意到：上述所有事件除了mouseenter和mouseleave外都冒泡。

　　重要：只有在同一個元素上相繼觸發(fā)mousedown和mouseup事件，才會觸發(fā)click事件。同樣，只有在同一個元素上觸發(fā)兩次click事件，才會觸發(fā)dbclick事件。

　　dbclick事件的產(chǎn)生過程如下：

• mousedown

• mouseup

• click

• mousedown

• mouseup

• click

• dbclick

上面介紹了有關鼠標的事件，下面介紹一些對于鼠標光標的位置：客戶區(qū)坐標位置、頁面坐標位置、屏幕坐標位置

一、客戶區(qū)坐標位置

　　通過客戶區(qū)坐標可以知道鼠標是在視口中什么位置發(fā)生的。

clientX和clientY分別表示鼠標點擊的位置。以body的左上角為原點，向右為X的正方向，向下為Y的正方向。這兩個都是event的屬性。舉例如下：

    點我
    

當我點擊按鈕的左上角時，顯示為00。效果如下：

二.頁面坐標位置

　　和客戶區(qū)坐標位置不同，頁面坐標位置表示鼠標光標在頁面而非視口中的位置。因此坐標是從頁面本身而非視口的左邊和頂邊計算的。如果前面的話不能很好的理解，接著看這里：在頁面沒有滾動的情況下，頁面坐標位置和客戶區(qū)坐標位置是相同的。

頁面坐標

    
    
    


    

     點擊我
    

在上面的例子中，我把p的高設置為了1200px；而我的瀏覽器視口高度為960px；所以一定需要滾動我們才能點擊按鈕，最終得到的結果是：pageX為13pageY為1210。

然而IE8及更早的瀏覽器是不支持事件對象上的頁面坐標的，即不能通過pageX和pageY來獲得頁面坐標，這時需要使用客戶區(qū)坐標和滾動信息來計算了。而滾動信息需要使用document.body(混雜模式)、document.documentElement(標準模式)中的scrollLeft和scrollTop屬性。舉例如下：

     點擊我
    

此例子在IE瀏覽器下可得到同樣結果。

三.屏幕坐標位置

　　與前兩者又有所不同，鼠標事件發(fā)生時，還有一個光標相對于整個電腦屏幕的位置。通過screenX和screenY屬性就可以確定鼠標事件發(fā)生時鼠標指針相對于整個屏幕的位置。舉例如下：

    
    
    


     點擊我
    

最終的結果如下：

顯然screenX和screenY是相對于屏幕的左方和上方的。

四.修改鍵

當點擊某個元素時，如果我們同時按下了ctrl鍵，那么事件對象的ctrlKey屬性值將為true，否則為false，對于alt、shift、meta（windows鍵盤的windows鍵、蘋果機的Cmd鍵）的事件屬性altKey、shiftKey、metaKey同樣如此。下面舉例如下：

     點擊我
    

這個例子中，我首先創(chuàng)建了一個array數(shù)組，接著如果我按下了那幾個鍵，就會存入相應的名稱。這里我同時按下了四個鍵，結果如下：

即最終將數(shù)組中的四個值拼接成了字符串顯示出來。

七、鼠標滾輪事件

當我向下滾動滾輪時，效果如下：

第四部分：鍵盤和文本事件

該部分主要有下面幾種事件：

• keydown：當用戶按下鍵盤上的任意鍵時觸發(fā)。按住不放，會重復觸發(fā)。

• keypress:當用戶按下鍵盤上的字符鍵時觸發(fā)。按住不放，會重復觸發(fā)。

• keyup:當用戶釋放鍵盤上的鍵時觸發(fā)。

• textInput:這是唯一的文本事件，用意是將文本顯示給用戶之前更容易攔截文本。

這幾個事件在用戶通過文本框輸入文本時才最常用到。

　　鍵盤事件：

    document.addEventListener("keydown",handleKeyDownClick,false);

        function handleKeyDownClick(event) {            
        var e = event||window.event||arguments.callee.caller.arguments[0];            
        if (e&&e.keyCode == 13) {
                alert("keydown");
            }
        }

“JavaScript事件類型怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質量的實用文章！