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

ranwu 發布于2019-08-26 11:59 / 1959人閱讀

摘要：事件事件的定義所有的元素都有事件，我們要做的就是為事件綁定函數，當元素發生事件時就會出發對應的函數。當我們沒有為事件綁定函數時，事件的值為。點擊事件需要注意的是事件名是，不是。鼠標移動事件鼠標移動持續觸發，當鼠標移出此元素上停止觸發。

1.事件

事件的定義：所有的元素都有事件，我們要做的就是為事件綁定函數，當元素發生事件時就會出發對應的函數。當我們沒有為事件綁定函數時，事件的值為null。

以下截取了部分元素的事件。

2.點擊事件

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

點擊事件分為以下三種：

    單擊 - click
        按下 - mousedown
        抬起 - mouseup
    右擊 - contextmenu(因為右擊都是根據上下文出現菜單，所以右擊是contextmenu)
        
    雙擊 - dbclick

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

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

注意：如果雙擊的間隔時間過長，則認定為兩次單擊。

3.當在div區域按下，但是離開div區域松手。則結果為：
注意：單擊事件只有在按下并抬起的時候才會觸發。

3.鼠標移動事件

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

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

4.鍵盤事件

鍵盤事件
    一般我們都是綁定在 document上進行全局的監控,
    或者可以在 表單控件上進行監聽

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

    鍵盤抬起
        keyup

注意：

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

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()

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

案例二：焦點事件和方法

云服務器 GPU云服務器 js事件對象 js綁定事件基礎事件對象 IE事件對象

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107973.html

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

摘要：事件事件的定義所有的元素都有事件，我們要做的就是為事件綁定函數，當元素發生事件時就會出發對應的函數。當我們沒有為事件綁定函數時，事件的值為。點擊事件需要注意的是事件名是，不是。鼠標移動事件鼠標移動持續觸發，當鼠標移出此元素上停止觸發。 1.事件事件的定義：所有的元素都有事件，我們要做的就是為事件綁定函數，當元素發生事件時就會出發對應的函數。當我們沒有為事件綁定函數時，事件的值為nul...

entner 2019-08-29 15:36 評論0 收藏0
JS基礎入門篇（二十）—事件和事件對象（一）

摘要：事件事件的定義所有的元素都有事件，我們要做的就是為事件綁定函數，當元素發生事件時就會出發對應的函數。當我們沒有為事件綁定函數時，事件的值為。點擊事件需要注意的是事件名是，不是。鼠標移動事件鼠標移動持續觸發，當鼠標移出此元素上停止觸發。 1.事件事件的定義：所有的元素都有事件，我們要做的就是為事件綁定函數，當元素發生事件時就會出發對應的函數。當我們沒有為事件綁定函數時，事件的值為nul...

羅志環 2019-08-02 10:37 評論0 收藏0
JS基礎入門篇（二十）—事件對象以及案例（二）

摘要：案例一點擊按鈕，選中中的全部內容方法選中全部。點擊按鈕選中輸入框中的內容點擊此按鈕選中的全部內容案例二點擊按鈕，選中中的全部內容，并復制到粘貼板上。事件對象當發生事件，執行事件處理函數的時候，該時刻的詳細信息。案例一.點擊按鈕，選中input中的全部內容 select（）方法：選中全部。點擊按鈕選中輸入框中的內容?。。。? Title ...

DevTTL 2019-08-29 15:38 評論0 收藏0
JS基礎入門篇（二十）—事件對象以及案例（二）

摘要：案例一點擊按鈕，選中中的全部內容方法選中全部。點擊按鈕選中輸入框中的內容點擊此按鈕選中的全部內容案例二點擊按鈕，選中中的全部內容，并復制到粘貼板上。事件對象當發生事件，執行事件處理函數的時候，該時刻的詳細信息。案例一.點擊按鈕，選中input中的全部內容 select（）方法：選中全部。點擊按鈕選中輸入框中的內容?。。。? Title ...

EsgynChina 2019-08-26 12:00 評論0 收藏0
JS基礎入門篇（二十）—事件對象以及案例（二）

摘要：案例一點擊按鈕，選中中的全部內容方法選中全部。點擊按鈕選中輸入框中的內容點擊此按鈕選中的全部內容案例二點擊按鈕，選中中的全部內容，并復制到粘貼板上。事件對象當發生事件，執行事件處理函數的時候，該時刻的詳細信息。案例一.點擊按鈕，選中input中的全部內容 select（）方法：選中全部。點擊按鈕選中輸入框中的內容?。。?！ Title ...

OldPanda 2019-08-02 10:37 評論0 收藏0