JavaScript面試考點(diǎn)之鼠標(biāo)事件

1、鼠標(biāo)事件

鼠標(biāo)點(diǎn)擊事件包括 4 個(gè):click(單擊)、dblclick(雙擊)、mousedown(按下)和 mouseup(松開)。其中 click事件類型比較常用,而 mousedown 和 mouseup 事件類型多用在鼠標(biāo)拖放、拉伸操作中。當(dāng)這些事件處理函數(shù)的返回值為 false時(shí),會(huì)禁止綁定對(duì)象的默認(rèn)行為。

a、click:單擊鼠標(biāo)左鍵時(shí)發(fā)生,如果右鍵也按下則不會(huì)發(fā)生。當(dāng)用戶的焦點(diǎn)在按鈕上并按了 Enter 鍵時(shí),同樣會(huì)觸發(fā)這個(gè)事件‘’

b、dblclick:雙擊鼠標(biāo)左鍵時(shí)發(fā)生,如果右鍵也按下則不會(huì)發(fā)生

c、mousedown:單擊任意一個(gè)鼠標(biāo)按鈕時(shí)發(fā)生

d、mouseup:松開任意一個(gè)鼠標(biāo)按鈕時(shí)發(fā)生

鼠標(biāo)經(jīng)過包括移過和移出兩種事件類型。當(dāng)移動(dòng)鼠標(biāo)指針到某個(gè)元素上時(shí),將觸發(fā) mouseover 事件;而當(dāng)把鼠標(biāo)指針移出某個(gè)元素時(shí),將觸發(fā) mouseout 事件。

a、mouseover:鼠標(biāo)指針移出某個(gè)元素到另一個(gè)元素上時(shí)發(fā)生。

b、mouseout:鼠標(biāo)指針位于某個(gè)元素上且將要移出元素的邊界時(shí)發(fā)生。

用mouseleave/mouseenter代替mouseover/mouseout

1)mouseover與mouseenter

mouseover:不論鼠標(biāo)指針穿過被選元素或其子元素,都會(huì)觸發(fā) mouseover 事件。

mouseenter:只有在鼠標(biāo)指針從元素外穿入被選元素(到元素內(nèi))時(shí),才會(huì)觸發(fā) mouseenter 事件。

2)mouseout與mouseleave

mouseout:不論鼠標(biāo)指針離開被選元素還是任何子元素,都會(huì)觸發(fā) mouseout 事件。

mouseleave:只有在鼠標(biāo)指針從元素內(nèi)穿出被選元素(到元素外)時(shí),才會(huì)觸發(fā) mouseleave 事件。

鼠標(biāo)移動(dòng)事件mousemove 是一個(gè)實(shí)時(shí)響應(yīng)的事件,當(dāng)鼠標(biāo)指針的位置發(fā)生變化時(shí)(至少移動(dòng)一個(gè)像素),就會(huì)觸發(fā) mousemove 事件。

a、mousemove:鼠標(biāo)在某個(gè)元素上時(shí)持續(xù)發(fā)生

當(dāng)鼠標(biāo)單擊事件發(fā)生時(shí),會(huì)觸發(fā)很多事件:mousedown、mouseup、click、dblclick。這些事件響應(yīng)的順序如下:mousedown → mouseup → click → mousedown → mouseup → click → dblclick

鼠標(biāo)定位

鼠標(biāo)事件實(shí)現(xiàn)頁(yè)面元素拖放操作的設(shè)計(jì)過程。實(shí)現(xiàn)拖放操作設(shè)計(jì)需要解決以下幾個(gè)問題。

清楚幾個(gè)坐標(biāo)概念:按下鼠標(biāo)時(shí)的指針坐標(biāo),移動(dòng)中當(dāng)前鼠標(biāo)指針坐標(biāo),松開鼠標(biāo)時(shí)的指針坐標(biāo),拖放元素的原始坐標(biāo),拖動(dòng)中的元素坐標(biāo)。

原理設(shè)計(jì):按下鼠標(biāo)時(shí),獲取被拖放元素和鼠標(biāo)指針的位置,在移動(dòng)中實(shí)時(shí)計(jì)算鼠標(biāo)偏移的距離,并利用該偏移距離加上被拖放元素的原坐標(biāo)位置,獲得拖放元素的實(shí)時(shí)坐標(biāo)。

拖拽實(shí)現(xiàn)

2、鍵盤實(shí)現(xiàn)

keydown:在鍵盤上按下某個(gè)鍵時(shí)觸發(fā)。如果按住某個(gè)鍵,會(huì)不斷觸發(fā)該事件。

keypress:按下某個(gè)鍵盤鍵并釋放時(shí)觸發(fā)。如果按住某個(gè)鍵,會(huì)不斷觸發(fā)該事件。該事件處理函數(shù)返回 false 時(shí),會(huì)取消默認(rèn)的動(dòng)作(如輸入的鍵盤字符)。

keyup:釋放某個(gè)鍵盤鍵時(shí)觸發(fā)。該事件僅在松開鍵盤時(shí)觸發(fā)一次,不是一個(gè)持續(xù)的響應(yīng)狀態(tài)。

1)鍵盤事件屬性

2)常見的鍵位和碼值

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 鼠標(biāo)事件在DOM3級(jí)事件中定義了9個(gè)鼠標(biāo)事件: click:在用戶單擊主鼠標(biāo)按鈕(一般是左邊的按鈕)或按下回車鍵時(shí)...
    浩瀚_null閱讀 360評(píng)論 0 1
  • DOM3級(jí)事件中定義了以下9個(gè)鼠標(biāo)事件: click:在用戶單擊主鼠標(biāo)按鈕或者按下回車鍵時(shí)觸發(fā)。意味著onclic...
    陸lmj閱讀 1,310評(píng)論 0 1
  • 第13章 事件 1. 事件流 事件流描述的是從頁(yè)面中接收事件的順序。 (1) 事件冒泡 IE 的事件流叫做事件冒泡...
    yinxmm閱讀 1,026評(píng)論 0 17
  • 事件處理程序在應(yīng)用中是必不可少的,雖然現(xiàn)在很多框架都有自己實(shí)現(xiàn)事件處理方法,但是熟知原生才能讓我們應(yīng)對(duì)各種各樣的需...
    俗三瘋閱讀 359評(píng)論 0 1
  • Web 瀏覽器中可能發(fā)生的事件有很多類型。如前所述,不同的事件類型具有不同的信息,而 DOM3 級(jí)事件規(guī)定了以下幾...
    More_5897閱讀 1,061評(píng)論 1 0

友情鏈接更多精彩內(nèi)容