【javascript】DOM模擬事件 和 自定義事件
事件,就是網頁中某一個特別值得關注的瞬間。
事件經常由使用者操作或通過其他瀏覽器功能來觸發。
但是也可以使用Javascript在任意時刻觸發特定的事件,這個時候的事件和瀏覽器建立的事件一樣。 也就是說這些事件還是有冒泡等屬性,而且瀏覽器也會響應該事件去執行相應的事件處理程式。
我們來跑一個最簡單的例子,比如現在頁面有一個按鈕,長這樣:
我們增加一個點選事件處理程式:
// 事件處理 document然後我們在頁面載入完成之後去模擬一個點選事件。
//模擬一個點選事件var btn = document. getElementById( 'myBtn')
// good
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