成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Dom 事件詳解

xiaokai / 2961人閱讀

摘要：級(jí)事件規(guī)定事件流包括三個(gè)階段事件捕獲目標(biāo)事件事件冒泡。返回布爾值，指示事件是否可擁可取消的默認(rèn)動(dòng)作。返回其事件監(jiān)聽器觸發(fā)該事件的元素。返回當(dāng)前對(duì)象表示的事件的名稱。不再派發(fā)事件常用于阻止事件冒泡。

事件是 JavaScript 與 HTML 交互的基礎(chǔ)。要實(shí)現(xiàn)用戶與頁(yè)面的交互，先要對(duì)目標(biāo)元素綁定特定的事件、設(shè)置事件處理函數(shù)，然后用戶觸發(fā)事件，事件處理函數(shù)執(zhí)行，產(chǎn)生交互效果。
DOM 事件級(jí)別

DOM 級(jí)別分為四個(gè)級(jí)別：DOM0 級(jí)、DOM1 級(jí)、DOM2 級(jí)、DOM3 級(jí)；



DOM 事件級(jí)別分為三個(gè)級(jí)別：

DOM0 級(jí)事件



缺點(diǎn)：無(wú)法設(shè)置多個(gè)事件處理函數(shù)

DOM2 級(jí)事件



可以為事件設(shè)置多個(gè)事件處理函數(shù)，可以通過第三個(gè)參數(shù) ( useCapture ) 設(shè)置在什么階段執(zhí)行事件處理函數(shù)，默認(rèn)是 false， 即在事件冒泡階段執(zhí)行事件處理函數(shù)。

需要注意的是在 IE8 及以下版本需要用 attachEvent 和 detachEvent 實(shí)現(xiàn)，只有兩個(gè)參數(shù)，事件名需要以 on 開頭，只支持在事件冒泡階段執(zhí)行事件處理函數(shù)。

DOM3 級(jí)事件

DOM3 級(jí)事件是在 DOM2 級(jí)事件的基礎(chǔ)上添加了更多的事件類型，允許自定義事件。

UI事件，當(dāng)用戶與頁(yè)面上的元素交互時(shí)觸發(fā)，如：load、scroll

焦點(diǎn)事件，當(dāng)元素獲得或失去焦點(diǎn)時(shí)觸發(fā)，如：blur、focus

鼠標(biāo)事件，當(dāng)用戶通過鼠標(biāo)在頁(yè)面執(zhí)行操作時(shí)觸發(fā)如：dbclick、mouseup

滾輪事件，當(dāng)使用鼠標(biāo)滾輪或類似設(shè)備時(shí)觸發(fā)，如：mousewheel

文本事件，當(dāng)在文檔中輸入文本時(shí)觸發(fā)，如：textInput

鍵盤事件，當(dāng)用戶通過鍵盤在頁(yè)面上執(zhí)行操作時(shí)觸發(fā)，如：keydown、keypress

合成事件，當(dāng)為IME（輸入法編輯器）輸入字符時(shí)觸發(fā)，如：compositionstart

變動(dòng)事件，當(dāng)?shù)讓覦OM結(jié)構(gòu)發(fā)生變化時(shí)觸發(fā)，如：DOMsubtreeModified

// 自定義事件
var event = new Event("test")
// 給元素綁定事件
domElement.addEventListener("test", function() {
    console.log("event test")
},)

// 觸發(fā)事件
setTimeout(function() {
    domElement.dispatchEvent(event)
}, 1000)
DOM 事件流 
想象畫在一張紙上的一組同心圓。如果把手指放在圓心上，那么手指指向的不僅僅是一個(gè)圓，而是紙上的所有圓。所以如果點(diǎn)擊了某個(gè)按鈕，點(diǎn)擊事件不僅僅發(fā)生在這個(gè)按鈕上，整個(gè)頁(yè)面也被點(diǎn)擊了。

事件流又稱為事件傳播，描述的是從頁(yè)面中接收事件的順序。DOM2 級(jí)事件規(guī)定事件流包括三個(gè)階段: 事件捕獲(capturing phase)、目標(biāo)事件(target phase)、事件冒泡(bubbling phase)。


發(fā)生的順序是：事件捕獲階段 --> 目標(biāo)事件階段 --> 事件冒泡階段

事件冒泡 
事件開始時(shí)由最具體的元素(目標(biāo)元素)接收，然后逐級(jí)向上傳播。




  
目標(biāo)元素

  父級(jí)元素

運(yùn)行結(jié)果：


事件捕獲 
事件按 window -> document -> html -> body -> ... -> 目標(biāo)元素 的方向向下層元素傳遞。




  
目標(biāo)元素

  父級(jí)元素

運(yùn)行結(jié)果：


![bubbling](https://user-gold-cdn.xitu.io...
)

事件對(duì)象參數(shù) event 
在用戶觸發(fā)事件，執(zhí)行事件處理函數(shù)的時(shí)候，默認(rèn)會(huì)向事件處理函數(shù)傳入一個(gè) event 對(duì)象，它記錄了該事件的狀態(tài)和行為。
event 常用屬性和方法

type 事件類型

target 事件發(fā)出者(觸發(fā)事件的元素)

currentTarget

事件監(jiān)聽者(被綁定事件的元素)

stopPropagation() 阻止事件冒泡或捕獲

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

target 、currentTarget 與 this

當(dāng)點(diǎn)擊 parent 時(shí)，輸出：

1 
...

2 
...

3 
...

當(dāng)點(diǎn)擊 child 時(shí)，輸出：

1 
...

2 
...

3 
...
所以 target 是事件發(fā)出者，curentTarget 是事件監(jiān)聽者，事件處理函數(shù)中的 this 等同于 e.currentTarget
event 對(duì)象的一些兼容性寫法

獲得 event

// 事件處理函數(shù)
function handleClick(event) {
    var e = event || window.event
    ···
}

獲得 target

···
var target = e.target || e.srcElement
···

阻止瀏覽器默認(rèn)行為

···
e.preventDefault ? e.preventDefault() : (e.returnValue = false)
···

阻止冒泡

···
e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true)
···

事件綁定與解綁

function addEvent(element, type, fn) {
    element.addEventListener ? element.addEventListener(type, fn, false) : element.attachEvent("on"+ type, fn)
}

function removeEvent(element, type, fn) {
    element.removeEventListener ? element.removeEventListener(type, fn, false) : element.detachEvent("on"+ type, fn)
}
屬性表

基礎(chǔ)屬性

屬性 描述
altKey 返回當(dāng)事件被觸發(fā)時(shí)，”ALT” 是否被按下。
button 返回當(dāng)事件被觸發(fā)時(shí)，哪個(gè)鼠標(biāo)按鈕被點(diǎn)擊。
clientX 返回當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的水平坐標(biāo)。
clientY 返回當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的垂直坐標(biāo)。
ctrlKey 返回當(dāng)事件被觸發(fā)時(shí)，”CTRL” 鍵是否被按下。
metaKey 返回當(dāng)事件被觸發(fā)時(shí)，”meta” 鍵是否被按下。
relatedTarget 返回與事件的目標(biāo)節(jié)點(diǎn)相關(guān)的節(jié)點(diǎn)。
screenX 返回當(dāng)某個(gè)事件被觸發(fā)時(shí)，鼠標(biāo)指針的水平坐標(biāo)。
screenY 返回當(dāng)某個(gè)事件被觸發(fā)時(shí)，鼠標(biāo)指針的垂直坐標(biāo)。
shiftKey 返回當(dāng)事件被觸發(fā)時(shí)，”SHIFT” 鍵是否被按下。

IE 屬性

屬性 描述
cancelBubble 如果事件句柄想阻止事件傳播到包容對(duì)象，必須把該屬性設(shè)為 true。
fromElement 對(duì)于 mouseover 和 mouseout 事件，fromElement 引用移出鼠標(biāo)的元素。
keyCode 對(duì)于 keypress 事件，該屬性聲明了被敲擊的鍵生成的 Unicode 字符碼。對(duì)于 keydown 和 keyup
offsetX,offsetY 發(fā)生事件的地點(diǎn)在事件源元素的坐標(biāo)系統(tǒng)中的 x 坐標(biāo)和 y 坐標(biāo)。
returnValue 如果設(shè)置了該屬性，它的值比事件句柄的返回值優(yōu)先級(jí)高。把這個(gè)屬性設(shè)置為 false 可以阻止瀏覽器默認(rèn)行為
srcElement 對(duì)于生成事件的 Window 對(duì)象、Document 對(duì)象或 Element 對(duì)象的引用。
toElement 對(duì)于 mouseover 和 mouseout 事件，該屬性引用移入鼠標(biāo)的元素。
x,y 事件發(fā)生的位置的 x 坐標(biāo)和 y 坐標(biāo)，它們相對(duì)于用CSS動(dòng)態(tài)定位的最內(nèi)層包容元素。

標(biāo)準(zhǔn) event 屬性（2級(jí) DOM 事件標(biāo)準(zhǔn)定義的屬性）

屬性或方法 描述
bubbles 返回布爾值，指示事件是否是冒泡事件類型。
cancelable 返回布爾值，指示事件是否可擁可取消的默認(rèn)動(dòng)作。
currentTarget 返回其事件監(jiān)聽器觸發(fā)該事件的元素。
eventPhase 返回事件傳播的當(dāng)前階段。
target 返回觸發(fā)此事件的元素（事件的目標(biāo)節(jié)點(diǎn)）。
timeStamp 返回事件生成的日期和時(shí)間。
type 返回當(dāng)前 Event 對(duì)象表示的事件的名稱。
initEvent() 初始化新創(chuàng)建的 Event 對(duì)象的屬性。
preventDefault() 通知瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動(dòng)作。
stopPropagation() 不再派發(fā)事件（常用于阻止事件冒泡）。

閱讀原文

參考資料：

事件流理解

javascript event（事件對(duì)象）詳解

DOM 事件深入淺出（一）

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117497.html

相關(guān)文章

  • Dom 事件詳解

    摘要：級(jí)事件規(guī)定事件流包括三個(gè)階段事件捕獲目標(biāo)事件事件冒泡。返回布爾值，指示事件是否可擁可取消的默認(rèn)動(dòng)作。返回其事件監(jiān)聽器觸發(fā)該事件的元素。返回當(dāng)前對(duì)象表示的事件的名稱。不再派發(fā)事件常用于阻止事件冒泡。 事件是 JavaScript 與 HTML 交互的基礎(chǔ)。要實(shí)現(xiàn)用戶與頁(yè)面的交互，先要對(duì)目標(biāo)元素綁定特定的事件、設(shè)置事件處理函數(shù)，然后用戶觸發(fā)事件，事件處理函數(shù)執(zhí)行，產(chǎn)生交互效果。 DOM 事...

    CodeSheep 評(píng)論0 收藏0

  • Dom 事件詳解

    摘要：級(jí)事件規(guī)定事件流包括三個(gè)階段事件捕獲目標(biāo)事件事件冒泡。返回布爾值，指示事件是否可擁可取消的默認(rèn)動(dòng)作。返回其事件監(jiān)聽器觸發(fā)該事件的元素。返回當(dāng)前對(duì)象表示的事件的名稱。不再派發(fā)事件常用于阻止事件冒泡。 事件是 JavaScript 與 HTML 交互的基礎(chǔ)。要實(shí)現(xiàn)用戶與頁(yè)面的交互，先要對(duì)目標(biāo)元素綁定特定的事件、設(shè)置事件處理函數(shù)，然后用戶觸發(fā)事件，事件處理函數(shù)執(zhí)行，產(chǎn)生交互效果。 DOM 事...

    DevTalking 評(píng)論0 收藏0

  • JavaScript學(xué)習(xí)總結(jié)（九）事件詳解

    摘要：布爾值表示捕獲階段調(diào)用事件處理程序，表示冒泡階段通過對(duì)象的方法，也可以定義事件的回調(diào)函數(shù)。對(duì)象會(huì)被作為第一個(gè)參數(shù)傳遞給事件監(jiān)聽的回調(diào)函數(shù)。布爾默認(rèn)值是，當(dāng)設(shè)置成時(shí)用以取消事件的默認(rèn)行為與中的相同。 其實(shí)這篇文章挺早之前就寫了，但是由于sf保存方面的bug，所以當(dāng)時(shí)寫了一大堆，結(jié)果沒保存，覺得這個(gè)沒寫完是個(gè)不小的遺憾，今天正好有空，就給補(bǔ)充下了，也正好給我的javascript學(xué)習(xí)總結(jié)做...

    LiveVideoStack 評(píng)論0 收藏0

  • JavaScript系列之事件詳解

    摘要：響應(yīng)某個(gè)事件的函數(shù)就叫事件處理程序或事件偵聽器。為事件指定事件處理程序的方法主要有種。事件處理程序事件直接加在元素上。事件委托利用冒泡的原理，把事件加到父元素或祖先元素上，觸發(fā)執(zhí)行效果，解決事件處理程序過多問題。事件委托優(yōu)點(diǎn)提高性能。 JavaScript簡(jiǎn)單入門可以看看我丑丑的Github博客JavaScript簡(jiǎn)單入門 事件 JavaScript與HTML之間的交互是通過事件實(shí)現(xiàn)的...

    pakolagij 評(píng)論0 收藏0

  • js事件詳解

    摘要：使用級(jí)方法指定的事件處理程序被認(rèn)為是元素的方法。用于立即停止事件在中的傳播，取消進(jìn)一步的事件捕獲或冒泡。捕獲事件目標(biāo)對(duì)象冒泡只有在事件處理程序執(zhí)行期間，對(duì)象才會(huì)存在，執(zhí)行完成后，對(duì)象就會(huì)被銷毀。 引用 事件是我認(rèn)為前端最特別的地方，這是唯一其他語(yǔ)言不一樣的地方，我們通過它與頁(yè)面進(jìn)行交互。 事件流 事件流描述的是從頁(yè)面中接收事件的順序。IE和網(wǎng)景團(tuán)隊(duì)提出流相反的事件流概念。IE事件流是事...

    AlienZHOU 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<