欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

javascript都有哪些事件類型

本篇內(nèi)容介紹了“javascript都有哪些事件類型”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

泊頭網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站開發(fā)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。成都創(chuàng)新互聯(lián)公司公司2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。

javascript的事件類型都有：UI事件、焦點(diǎn)事件、鼠標(biāo)與滾輪事件、鍵盤與文本事件、復(fù)合事件、變動事件、HTML5事件、設(shè)備事件、觸摸與手勢事件等。

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

JavaScript事件類型

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

  • UI事件

  • 焦點(diǎn)事件

  • 鼠標(biāo)與滾輪事件

  • 鍵盤與文本事件

  • 復(fù)合事件

  • 變動事件

  • HTML5事件

  • 設(shè)備事件

  • 觸摸與手勢事件

第一部分：UI事件

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

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

1.load事件

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

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

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

<img src="smile.png" onload="alert('loaded')">　　

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

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

2.unload事件

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

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

  值得注意的是，一定要小心編寫onload事件中的代碼，因?yàn)樗窃陧撁嫘遁d后才觸發(fā)，所以說頁面加載后存在的那些對象，在onload觸發(fā)之后就不一定存在了！

<body onload="alert('changed')">

3.resize事件

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

<body onresize="alert('changed')">

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

4.scroll事件

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

第二部分：焦點(diǎn)事件

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

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

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

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

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

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

第三部分：鼠標(biāo)與滾輪事件

鼠標(biāo)事件是Web開發(fā)中最常用的一類事件，因?yàn)槭髽?biāo)是最主要的定位設(shè)備。

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

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

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

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

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

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

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

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

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

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

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

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

  • mousedown

  • mouseup

  • click

  • mousedown

  • mouseup

  • click

  • dbclick

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

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

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

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

    <button id="clickMe">點(diǎn)我</button>
    <script>
        var button=document.getElementById("clickMe");
        button.onclick=function(event){
            alert(event.clientY+""+event.clientX);
        };    
     </script>

當(dāng)我點(diǎn)擊按鈕的左上角時(shí)，顯示為00。效果如下：

javascript都有哪些事件類型

二.頁面坐標(biāo)位置

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

頁面坐標(biāo)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>頁面坐標(biāo)位置</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            width: 800px;
            height: 1200px;
            /*我的電腦的視口高度為960px；*/
            background: #ccc;
        }
    </style>
</head>
<body>
    <div></div>
    <button id="button"> 點(diǎn)擊我</button>
    <script>
        var button=document.getElementById("button");
        button.onclick=function(){
            alert("pageX為"+event.pageX+"pageY為"+event.pageY);
        };
    </script>
</body>
</html>

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

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

<button id="button"> 點(diǎn)擊我</button>
    <script>
        var button=document.getElementById("button");
        button.onclick=function(){
            var pageX=event.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft);
            var pageY=event.clientY+(document.body.scrollRight||document.documentElement.scrollRight);
            alert("pageX為"+pageX+"pageY為"+pageY);
        };
    </script>

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

三.屏幕坐標(biāo)位置

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>頁面坐標(biāo)位置</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

    </style>
</head>
<body>
    <button id="button"> 點(diǎn)擊我</button>
    <script>
        var button=document.getElementById("button");
        button.onclick=function(){
            alert("X為："+event.screenX+"Y為："+event.screenY);
        };
    </script>
</body>
</html>

最終的結(jié)果如下：

javascript都有哪些事件類型

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

四.修改鍵

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

<button id="button"> 點(diǎn)擊我</button>
    <script>
        var button=document.getElementById("button");
        button.onclick=function(){
            var array=new Array();
            if(event.shiftKey){
                array.push("shift");
            }
            if(event.ctrlKey){
                array.push("ctrl");
            }
            if(event.altKey){
                array.push("alt");
            }
            if(event.metaKey){
                array.push("meta");
            }
            alert(array.join(","));
        };
    </script>

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

javascript都有哪些事件類型

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

五、相關(guān)元素

    <button id="button"> 點(diǎn)擊我</button>
    <script>        var button=document.getElementById("button");
        button.onmouseup=function(){
            alert(event.button);
        };    </script>

當(dāng)我是用左鍵產(chǎn)生mousedown事件時(shí)，彈出窗口為0，中間鍵為1，右鍵為2。

六、鼠標(biāo)滾輪事件

    <script>
        document.onmousewheel=function(){
            alert(event.wheelDelta);
        };
    </script>

當(dāng)我向下滾動滾輪時(shí)，效果如下：

javascript都有哪些事件類型

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

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

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

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

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

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

這幾個(gè)事件在用戶通過文本框輸入文本時(shí)才最常用到。

鍵盤事件：

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è)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

本文名稱：javascript都有哪些事件類型
網(wǎng)站URL：http://www.chinadenli.net/article20/joieco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、云服務(wù)器、軟件開發(fā)、商城網(wǎng)站、標(biāo)簽優(yōu)化、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

綿陽服務(wù)器托管