JS基礎(chǔ)入門(mén)篇（二十）—事件和事件對(duì)象（一）

ranwu 發(fā)布于2019-08-26 11:59 / 1968人閱讀

摘要：事件事件的定義所有的元素都有事件，我們要做的就是為事件綁定函數(shù)，當(dāng)元素發(fā)生事件時(shí)就會(huì)出發(fā)對(duì)應(yīng)的函數(shù)。當(dāng)我們沒(méi)有為事件綁定函數(shù)時(shí)，事件的值為。點(diǎn)擊事件需要注意的是事件名是，不是。鼠標(biāo)移動(dòng)事件鼠標(biāo)移動(dòng)持續(xù)觸發(fā)，當(dāng)鼠標(biāo)移出此元素上停止觸發(fā)。

1.事件

事件的定義：所有的元素都有事件，我們要做的就是為事件綁定函數(shù)，當(dāng)元素發(fā)生事件時(shí)就會(huì)出發(fā)對(duì)應(yīng)的函數(shù)。當(dāng)我們沒(méi)有為事件綁定函數(shù)時(shí)，事件的值為null。

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

2.點(diǎn)擊事件

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

點(diǎn)擊事件分為以下三種：

    單擊 - click
        按下 - mousedown
        抬起 - mouseup
    右擊 - contextmenu(因?yàn)橛覔舳际歉鶕?jù)上下文出現(xiàn)菜單，所以右擊是contextmenu)
        
    雙擊 - dbclick

1.當(dāng)單擊div時(shí)，結(jié)果為：
會(huì)觸發(fā) 單擊抬起按下 這三個(gè)事件

2.當(dāng)雙擊div時(shí)，結(jié)果為：
會(huì)觸發(fā)兩次 單擊抬起按下 這三個(gè)事件
觸發(fā)一次雙擊事件

注意：如果雙擊的間隔時(shí)間過(guò)長(zhǎng)，則認(rèn)定為兩次單擊。

3.當(dāng)在div區(qū)域按下，但是離開(kāi)div區(qū)域松手。則結(jié)果為：
注意：單擊事件只有在按下并抬起的時(shí)候才會(huì)觸發(fā)。

3.鼠標(biāo)移動(dòng)事件

鼠標(biāo)移動(dòng)：持續(xù)觸發(fā)，當(dāng)鼠標(biāo)移出此元素上停止觸發(fā)。

當(dāng)在div區(qū)域內(nèi)移動(dòng)時(shí)，不停的打印mousemove-鼠標(biāo)在div上移動(dòng)。當(dāng)鼠標(biāo)移出div區(qū)域時(shí)，停止打印。結(jié)果為：

4.鍵盤(pán)事件

鍵盤(pán)事件
    一般我們都是綁定在 document上進(jìn)行全局的監(jiān)控,
    或者可以在 表單控件上進(jìn)行監(jiān)聽(tīng)

    鍵盤(pán)按下
        keydown
        keypress - 功能鍵不觸發(fā)(鍵盤(pán)的上下左右等功能鍵不觸發(fā))

    鍵盤(pán)抬起
        keyup

注意：

keydown 和 keypress的區(qū)別：keypress 功能鍵不觸發(fā)(例如：鍵盤(pán)的上下左右等功能鍵不觸發(fā) keypress 事件)

eg：當(dāng)在此頁(yè)面上按下鍵盤(pán)上的 a ，結(jié)果為：

eg：當(dāng)在此頁(yè)面上按下鍵盤(pán)上的 shfit ，結(jié)果為：

eg：當(dāng)在此頁(yè)面上的input框中輸入鍵盤(pán)上的 a ，結(jié)果為：

5.焦點(diǎn)事件

焦點(diǎn)

    頁(yè)面中一些元素 可以獲得 焦點(diǎn),
    當(dāng)他們獲得焦點(diǎn)的時(shí)候, 我們可以操作他們

    注意: 不是所有 的 元素 都可以獲得焦點(diǎn)
        瀏覽器中只會(huì)有 一個(gè)元素 得到焦點(diǎn),當(dāng)一個(gè)元素得到焦點(diǎn)的時(shí)候,必然會(huì)有另一個(gè)元素失去焦點(diǎn)

切換焦點(diǎn)的方法：
切換焦點(diǎn)的方式:
    1 - 按tab
        tabIndex(如果沒(méi)使用tabIndex，則用tab切換，是按頁(yè)面節(jié)點(diǎn)順序切換。如果寫(xiě)了tabIndex的值，則按值的大小，從小到大切換)
    2 - 點(diǎn)擊
    3 - js
    4 - html autofocus（頁(yè)面打開(kāi)就自動(dòng)獲取焦點(diǎn)）
     
 焦點(diǎn)事件
    onfocus（獲取焦點(diǎn)）
    onblur（失去焦點(diǎn)）
焦點(diǎn)方法
    t.focus()
    t.blur()

案例一：（代碼運(yùn)行結(jié)果很難描述，大家自行運(yùn)行。）

案例二：焦點(diǎn)事件和方法