JavaScript事件處理

時間 2019-12-06

標籤 javascript 事件處理欄目 JavaScript 简体版

原文原文鏈接

1、事件傳播方式

他們是描述事件觸發時序問題的術語，綁定事件方法(事件委託：addEventListener)的第三個參數，就是控制事件觸發順序的類型。true=事件捕獲，false=事件冒泡。默認false,即事件冒泡javascript

1. 冒泡

是自下而上的去觸發事件,addEventListener(,,false)：第三個參數爲false。css

2. 捕捉

是從document到觸發事件的那個節點，即自上而下的去觸發事件。addEventListener(,,true)：第三個參數爲true。html

2、註冊事件方法：

1. JavaScript原生方式

<body>
    <button id="btn" onclick="btnClick()/*內嵌HTML方式*/">點擊事件</button>
    <script>
        /*DOM0 1.0 內嵌HTML方式*/
        function btnClick() {
            alert("單擊事件");
        }   //內嵌方法不推薦使用，好的編程風格應當保持HTML和js代碼行爲分離
        
        var btn = document.getElementById('btn');
        /*DOM0  2.0 當作button對象的方法調用方式*/
        btn.onclick = function () {
            alert("單擊事件");
        };
        
        //DOM2  3.0 標準事件模型
        var callback = function () {
            alert("單擊事件發生");
        };
        btn.addEventListener('click',callback,false);
    </script>
</body>

2. JQuery方式

1. $('#btn').click(callback);
2. $('#btn').bind('click',callback);

3. 鼠標事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠標事件</title>
    <style>
        #clickInfo{
            position: absolute;min-width: 50px; min-height: 70px;display: none; background-color: #000FFF;color: white;  box-shadow: 2px 2px 2px rgba(120,159,102,0.73);
        }
    </style>
</head>
<body>
<div id="btn" onclick="btnOnclick()">事件</div>
<div id="clickInfo">自定義郵件菜單</div>
</body>
<script src="../js/jquery-3.2.1.js"></script>
<script>
//    內嵌事件
    function btnOnclick() {
        alert('內嵌點擊事件');
    }
    //給對象進行事件監聽
    var btn =  document.getElementById('btn');
    btn.addEventListener('click',function () {
        alert('addEventListener點擊事件');
    });
    //對象的onclick屬性
    btn.onclick = function () {
        alert('onclick屬性點擊事件');
    };
    //jQuery的click事件函數
    $('#btn').click(function () {
        alert('jq click事件');
    });
    //jQuery給對象綁定事件click
    $('#btn').bind('click',function () {
            alert('jq bind click事件');
    });
    
    //鼠標事件分類
    var btn =  document.getElementById('btn');
    btn.onmousedown = function(e){
        if(e.button == 2)
            alert('右鍵');
        else if(e.button == 1)
            alert('中間');
        else if(e.button == 0)
            alert('左鍵');
        else
            alert('未知 = ' + e.button);
    };
    //自定義郵件菜單
    document.oncontextmenu=function(e){
        //自定義右鍵菜單(div)
        var left =  e.offsetX;
        var top =  e.offsetY;
        if($('#clickInfo').css('display') == 'none')
           $('#clickInfo').css('display','block');
        else
            $('#clickInfo').css('display','none');
        $('#clickInfo').css('left',parseInt(left)+10+'px');
        $('#clickInfo').css('top',parseInt(top)+10+'px');

        return false; //去掉默認的郵件菜單
    };
</script>
</html>

4. 滾動條事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滾動條事件</title>
    <style>
        #btn{
            position: fixed;
            bottom: 130px;
            right: 30px;
            display: none;
            width: 70px;
            height: 70px;
            border: none;
            box-shadow: 1px 6px 1px #888888;
            background-color: green;
            color: white;
            outline: none;
            font-size: 1.5em;
        }
        li{
            text-align: center;
            list-style: none;
        }
        #divShow{
            position: fixed;
            left: 46%;
            top: 40%;
            width: 100px;
            height: 100px;
            background-color: rgba(0,0,0,0.33);
            text-align: center;
            line-height: 100px;
            display: none;
            color: white;
            border-radius: 100%;
            font-size: 1.4em;
        }

    </style>
</head>
<body>
<button id="btn">回到頂部</button>
<div id="divShow"></div>
<script src="../js/jquery-3.2.1.js"></script>
<script>
    //初始化頁面
    var li = '';
    for(var i=0;i<500;i++){
        li += '<li>'+'第 '+i.toString()+' 行'+'</li>';
    }
    document.write(li);
    //回到頂部事件
    var btn =  document.getElementById('btn');
    btn.onclick = function () {
        window.scrollTo(0,0);
    };

    //判斷向上或者向下 滾動
    var a=0,b=0;
    $(document).scroll(function () {

        b =  $(document).scrollTop();
        document.title = b;

        // 滾動到 距離頂部 1500 位置 顯示 ‘回到頂部’ 按鈕;
        if(b >= 1500) {
            $('#btn').css('display','block');
        }else {
            $('#btn').css('display','none');
        }

        // 交互
        $('#divShow').css('display','block');
        if(a<b)
            $('#divShow').text('\n 向下滾動');
        else
            $('#divShow').text('\n 向上滾動');
        a = b;

        // 2000ms以後自動消失
        setTimeout(function () {
            $('#divShow').css('display','none');
        },2000);


    });

</script>
</body>
</html>

5. 鍵盤事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鍵盤事件</title>
    <style>
        body{
            text-align: center;
        }
        #divShow{
            position: fixed;top: 37%;left: 46%; height: 100px;width: 100px;background-color:chartreuse;text-align: center;  line-height: 100px;  font-size: 1.5em;  border-radius: 100%;display: none;
        }
    </style>
</head>
<body>
<div id="divShow"></div>
<div style="margin: auto;margin-top: 25%;background-color: black;color: white;width: 20%;">您嘗試敲擊一下鍵盤</div>
<script src="../js/jquery-3.2.1.js"></script>
<script>
$(document).keydown(function (e) {
    var kcode =  e.keyCode;
    $('#divShow').css('background-color','chartreuse');
    if(64 < kcode < 106 ){
        var keyvalue = String.fromCharCode(e.keyCode);
        $('#divShow').text(keyvalue);
    }
    if(kcode == 13) {
        $('#divShow').text("回車登陸");
        $('#divShow').css('background-color','yellow');
    }
    $('#divShow').css('display','block');
    setTimeout(function () {

        $('#divShow').css('display','none');
    },3000);

});
</script>
</body>
</html>

6. 自定義事件---右滑

<script>
    var ev = new MouseEvent('myflip', {
        cancelable: true,
        bubble: true,
        view: window
    });
    document.addEventListener('myflip', function (event) {
        console.log('右滑');
    }, false);

    var offX_DOWN = 0;
    var offY_DOWN = 0;
    $(document).mousedown(function (e) {
        offX_DOWN = e.clientX;
        offY_DOWN = e.clientY;
        console.log('\n 前：'+'('+offX_DOWN+' , '+offY_DOWN+')');
    });
    $(document).mouseup(function (e) {
        var offX_UP = e.clientX;
        var offY_UP = e.clientY;
        console.log('\n 後：'+'('+offX_UP+' , '+offY_UP+')');
        var a = parseInt(offX_UP) - parseInt(offX_DOWN);
        var b = parseInt(offY_UP) - parseInt(offY_DOWN);
        console.log('\n（a,b）= '+'('+a+' , '+b+')');
        if(b >5){
            //觸發 右滑 的自定義事件
            document.dispatchEvent(ev);
        }
    });
</script>

關於自定義事件，原本還在糾結一條原生事件從物理層鼠標到一個網頁的定義過程？有些鑽牛角尖！後來研究了一點安卓系統以後就知足了。java

舉個例子：咱們如今是在一個安卓手機打開谷歌瀏覽器訪問一個網頁，點擊了一個按鈕，由此引起一個點擊事件：jquery

1. 物理層-手機屏幕上的傳感器：感知了一個按壓狀態web

2. Android系統（觸摸）驅動：把這個按壓狀態定義成一組二進制碼值，並把它轉譯成Android Linux內核的碼值（scancode）。編程

3. Android系統接收到scancode以後，又把它轉成Android系統能識別的keycode，而後在framework層針對這個keycode寫一個廣播分發出去，到這裏寫過Android apk的同窗就能理解了，他在寫APK的時候能夠不用Android SDK提供的事件類型，能夠直接經過特定的API 獲取到這個點擊事件的keycode或者對應的廣播消息，而後寫相關的響應函數。瀏覽器

4. 咱們Android手機上的谷歌瀏覽器也是一個APK。因此到這裏這個點擊事件就這樣傳到了瀏覽器。經過瀏覽器APK的再一次轉義或者裏邊的webkit直接在Android底層獲取到了點擊事件的信息碼值。而後它再一次轉譯成標準的的W3C事件「名稱」。這樣在最上層統一造成了W3C DOM標準以後，開發者便能統一使用了。函數

因此對於web開發者來講，就無需關心原生的事件如何產生了。只須要知道瀏覽器轉義後的最後一層，W3C 的DOM事件標準便可，它對應的就是瀏覽器能支持的「最原生」事件了！spa

自定義事件不是讓開發者去自定義「原生」事件，那是瀏覽器和webkit要作的事情（固然瀏覽器定義的事件也不是最「原生」事件，由於它也是接收來自系統層的事件，並轉換，自定義成本身的事件）。

因此自定義事件是讓開發者在W3C 標準「原生」事件的基礎上進行組合邏輯，封裝成更加簡單的事件。《JavaScript 高級程序設計》第三版書中P13也有描述：自定義事件不是由DOM原生觸發的。

7. event對象

在遵循 W3C 規範的瀏覽器中，event 對象經過事件處理函數的參數傳入。 語法： elementObject.OnXXX=function(e){ var eve=e; // 聲明一個變量來接收 event 對象 }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。