1. 程式人生 > >【javascript】DOM模擬事件 和 自定義事件

【javascript】DOM模擬事件 和 自定義事件

事件,就是網頁中某一個特別值得關注的瞬間。

事件經常由使用者操作或通過其他瀏覽器功能來觸發。

但是也可以使用Javascript在任意時刻觸發特定的事件,這個時候的事件和瀏覽器建立的事件一樣。 也就是說這些事件還是有冒泡等屬性,而且瀏覽器也會響應該事件去執行相應的事件處理程式。


我們來跑一個最簡單的例子,比如現在頁面有一個按鈕,長這樣:

< button id= "myBtn" >click me! </ button >


我們增加一個點選事件處理程式:

// 事件處理 document
. getElementById( 'myBtn'). addEventListener( 'click', () =>{ console. log( 'hi, you trigger the click event') })


然後我們在頁面載入完成之後去模擬一個點選事件。

//模擬一個點選事件
var btn = document. getElementById( 'myBtn')
// good
// 以前是通過document.createEvent()來建立事件,不過後來被廢棄了,現在使用Event()建構函式
var event = new MouseEvent( 'click') //MouseEvent繼承自UIEvent
//觸發事件 btn. dispatchEvent( event)

這樣在頁面載入完成之後【我們沒有點選按鈕】,但是在console裡面看到了,列印資訊,但是我們並沒有手動觸發這個事件,我們模擬事件已經完成了。

MouseEvent的資訊可以參考MDN detail ,MouseEvent是繼承自UIEvent,你還可以模擬其他型別的事件,除了滑鼠事件,還有ClipboardEvent等等等,可以從Event 頁面檢視。


其中特殊的一個是CustomEvent,允許我們自定義任意功能的事件。

我們以往知道的事件就是點選事件,獲取焦點事件,change事件等,我們可以定義特定型別的事件,比如叫做 'any'。首先事件是繫結到某一個dom target上面。

< div id= "myDiv" > div with custom event </ div >

然後新增事件監聽:


// 先監聽 document. getElementById( 'myDiv'). addEventListener( 'any', ( data) =>{ console. log( 'your custom event trigger the process method', data) })

觸發這個自定義事件:

// 觸發any 事件 const data = { name: 'jackkk', } // 建立event物件的初始化資料 const customeEvent = new CustomEvent( 'any', { bubbles: true, detail: data }) document. getElementById( 'myDiv'). dispatchEvent( customeEvent)

 

而且我們可以利用事件的冒泡特性,獲取到這個data資料,不用在上面的監聽程式裡面修改程式碼。相當於,事件觸發動作在一處觸發,但是我們可以利用冒泡特性,新增多個監聽程式。有釋出-訂閱模式的影子,一個subject的資料變化->dispatchEvent(event),然後通知多個observer,這裡的多個observers 可以是 myDiv的任意祖先元素。

所以我們可以寫一個另外的監聽程式,在這裡共享或者說同步獲取到資料變化:

document. addEventListener( 'any', ( data) =>{ console. warn( 'get the data from event dispath', data) })


參考: MDN

        《JS高程》13.5

         75team