JS基礎入門篇（二十）—事件和事件對象（一）

時間 2019-11-10

原文原文鏈接

1.事件

事件的定義：全部的元素都有事件，咱們要作的就是爲事件綁定函數，當元素髮生事件時就會出發對應的函數。當咱們沒有爲事件綁定函數時，事件的值爲null。html

<body>
    <div style="width: 100px;height: 100px; background:red"></div>
    <script>
        var div=document.getElementsByTagName("div")[0];
        console.dir(div);//打印div元素上的全部屬性
    </script>
</body>

如下截取了部分元素的事件。
瀏覽器

2.點擊事件

須要注意的是：事件名是click，不是onclik。on指的是在....上。函數

點擊事件分爲如下三種：spa

單擊 - click
        按下 - mousedown
        擡起 - mouseup
    右擊 - contextmenu(由於右擊都是根據上下文出現菜單，因此右擊是contextmenu)
        
    雙擊 - dbclick

<body>
    <div style="width: 100px;height: 100px; background:red"></div>
    <script>
        var div = document.getElementsByTagName("div")[0];

        //只有在此div上 按下 並 擡起 纔會觸發div的點擊事件
        div.onclick=function () {
            console.log("click - 點擊");
        };
        div.onmousedown=function () {
            console.log("mousedown - 按下");
        };
        div.onmouseup=function () {
            console.log("mouseup - 擡起");
        };
        div.oncontextmenu=function () {
            console.log("contextmenu - 右擊");
        };
        div.ondblclick=function () {
            console.log("dblclick - 雙擊");
        };
    </script>
</body>

1.當單擊div時，結果爲：
會觸發 單擊擡起按下 這三個事件
code

2.當雙擊div時，結果爲：
會觸發兩次 單擊擡起按下 這三個事件
觸發一次雙擊事件htm

注意：若是雙擊的間隔時間過長，則認定爲兩次單擊。blog

3.當在div區域按下，可是離開div區域鬆手。則結果爲：
注意：單擊事件只有在按下並擡起的時候纔會觸發。事件

3.鼠標移動事件

鼠標移動：持續觸發，當鼠標移出此元素上中止觸發。圖片

<body>
    <div style="width: 100px;height: 100px; background:red"></div>
    <script>
        var div=document.getElementsByTagName("div")[0];
        div.onmousemove=function () {
            console.log("mousemove-鼠標在div上移動");
        }
    </script>
</body>

當在div區域內移動時，不停的打印mousemove-鼠標在div上移動。當鼠標移出div區域時，中止打印。結果爲：ip

4.鍵盤事件

鍵盤事件
    通常咱們都是綁定在 document上進行全局的監控,
    或者能夠在 表單控件上進行監聽

    鍵盤按下
        keydown
        keypress - 功能鍵不觸發(鍵盤的上下左右等功能鍵不觸發)

    鍵盤擡起
        keyup

注意：

keydown 和 keypress的區別：keypress 功能鍵不觸發(例如：鍵盤的上下左右等功能鍵不觸發 keypress 事件)

<body>
<div style="width: 100px;height: 100px; background:red"></div>
<input type="text" id="t">
<script>
    var div=document.getElementsByTagName("div")[0];
    var input=document.getElementById("t");
    document.onkeydown = function(){
        console.log( "document - keydown" );
    };

    document.onkeypress = function(){
        console.log( "document - keypress" );
    };

    document.onkeyup = function(){
        console.log( "document - keyup" );
    };
    //------------------------------------------
    t.onkeydown = function(){
        console.log( "t - keydown" );
    };

    t.onkeypress = function(){
        console.log( "t - keypress" );
    };

    t.onkeyup = function(){
        console.log( "t - keyup" );
    };
</script>
</body>

eg：當在此頁面上按下鍵盤上的 a ，結果爲：

eg：當在此頁面上按下鍵盤上的 shfit ，結果爲：

eg：當在此頁面上的input框中輸入鍵盤上的 a ，結果爲：

5.焦點事件

焦點

頁面中一些元素 能夠得到 焦點,
    當他們得到焦點的時候, 咱們能夠操做他們

    注意: 不是全部 的 元素 均可以得到焦點
        瀏覽器中只會有 一個元素 獲得焦點,當一個元素獲得焦點的時候,必然會有另外一個元素失去焦點

切換焦點的方法：
切換焦點的方式:
    1 - 按tab
        tabIndex(若是沒使用tabIndex，則用tab切換，是按頁面節點順序切換。若是寫了tabIndex的值，則按值的大小，從小到大切換)
    2 - 點擊
    3 - js
    4 - html autofocus（頁面打開就自動獲取焦點）
     
 焦點事件
    onfocus（獲取焦點）
    onblur（失去焦點）
焦點方法
    t.focus()
    t.blur()

案例一：（代碼運行結果很難描述，你們自行運行。）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
    #box{
        width:100px;
        height:100px;
        background-color:red;
    }
</style>
</head>
<body>
<div id="box"></div>
<input type="text" id="t" tabIndex = "1" />
<hr />
<input type="text" id="t2" tabIndex = "3" />
<hr />
<input type="text" tabIndex = "2"  autofocus/>
<hr />
<button id="btn">第二個輸入框獲取到焦點</button>
<script>
    var t = document.getElementById("t");
    var t2 = document.getElementById("t2");
    var box = document.getElementById("box");
    var btn = document.getElementById("btn");

    //t獲取焦點時，打印t-focus。
    t.onfocus = function(){
        console.log( "t-focus" );
    };
    //box獲取不到焦點，故打印不出
    box.onfocus = function(){
        console.log( "box-focus" );
    };
    //當btu點擊，讓t2調用獲取焦點方法
    btn.onclick = function(){
        t2.focus();
    }
</script>
</body>
</html>

案例二：焦點事件和方法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
    #box{
        width:100px;
        height:100px;
        background-color:red;
    }
</style>
</head>
<body>
<input type="text" id="t" />
<button id="btn">輸入框獲取到焦點</button>
<script>
var t = document.getElementById("t");
var btn = document.getElementById("btn");
//獲取焦點觸發的事件
t.onfocus = function(){
    console.log( "t - focus" );
};
//失去焦點觸發的事件
t.onblur = function(){
    console.log( "t - blur" );
};
btn.onclick = function(){
    //btu點擊時，給調用獲取焦點方法
    t.focus();
}


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

相關標籤/搜索

每日一句

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