JS的原生事件

javascript原生的事件包括事件流、處理函數(shù)、事件對象等。而在兼容性也有問題。

1事件流

事件流是ie和Netscape提出來的,但是兩個公司提出的事件流確實剛好相反的。ie是事件冒泡,Netscape是事件捕獲。

ie會從觸發(fā)事件的元素一直往上冒泡直到document元素。

Netscape則是從document元素開始往下傳播一直到觸發(fā)事件的元素

2事件處理函數(shù)
這里有3種方法:

DOM元素綁定事件,

HTML標(biāo)簽內(nèi)綁定事件,

事件監(jiān)聽綁定事件

我就不一一介紹了。

3事件對象

在js中所有的事件對象都繼承自Event。

在不同的瀏覽器中Event對象還是有區(qū)別的。

但是屬性和方法還是公用的:

bubbles 是否冒泡

cancelable 是否可以取消默認(rèn)行為

currentTarget 目前元素

target 目標(biāo)元素

defaultPrevented 是否已被阻止默認(rèn)行為

type 事件類型

eventPhase 事件流哪個階段

detail 信息

trusted js創(chuàng)建的為false,瀏覽器創(chuàng)建為true

view 等同于window

preventDefault() 阻止默認(rèn)行為

stopPropagation() 阻止冒泡和捕獲

stopImmediatePropagation() 立即阻止冒泡和捕獲

但是ie8又不同了,它的事件對象是這樣的:

cancelBubble 是否取消冒泡

returnValue 返回值

srcElement 目標(biāo)元素

type 事件類型

還有其他的一些事件,如:

load:頁面、img圖像、所有框架、嵌入內(nèi)容加載完后在object元素觸發(fā)。

unload:離開頁面時觸發(fā)

resize:調(diào)整瀏覽器窗口大小

scroll:滾動事件

focus:得到焦點(diǎn)觸發(fā)

blur:失去焦點(diǎn)觸發(fā)

鼠標(biāo)事件:

click:點(diǎn)擊

dblclick:雙擊

mousedown/mouseup:按下抬起

mouseenter:鼠標(biāo)移入

mouseleave:鼠標(biāo)移出

mouseover:鼠標(biāo)經(jīng)過

mousemove:鼠標(biāo)在元素內(nèi)移動

在DOM標(biāo)準(zhǔn)中還有這些

clientX、clientY:當(dāng)前位置

detail 單擊次數(shù)

ctrlKey

altKey

metaKey

shiftKey

pageX、pageY

screenX、screenY 等等。

學(xué)的不精,總結(jié)的不到位。還請見諒。

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

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

  • JavaScript 程序采用了異步事件驅(qū)動編程模型。在這種程序設(shè)計風(fēng)格下,當(dāng)文檔、瀏覽器、元素或與之相關(guān)的對象發(fā)...
    劼哥stone閱讀 1,336評論 3 11
  • 事件流 IE和Netscape開發(fā)團(tuán)隊提出了完全相反的兩種事件流的概念,事件冒泡流和事件捕獲流。 事件冒泡 事件由...
    exialym閱讀 1,058評論 0 9
  • 以下文章為轉(zhuǎn)載,對理解JavaScript中的事件處理機(jī)制很有幫助,淺顯易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy閱讀 3,175評論 1 10
  • 本章內(nèi)容 理解事件流 使用事件處理程序 不同的事件類型 JavaScript 與 HTML 之間的交互是通過事件實...
    悶油瓶小張閱讀 340評論 0 0
  • 最近因為通過hexo搭建了一個簡易的個人靜態(tài)博客,因為嫌棄hexo部署冗雜的步驟,所以研究了一些自動化部署的機(jī)制,...
    Jaren_lei閱讀 13,955評論 10 33

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