標籤：
讓我萬萬沒想到的是,原來《JavaScript進階程式設計(第3版)》裡面提到的方法已經是過時的了.後來我查看了MDN,才找到了最新的方法.
類比滑鼠事件
MDN上已經說得很清楚,儘管為了保持向後相容MouseEvent.initMouseEvent()仍然可用,但是呢,我們應該使用MouseEvent().
我們使用如下頁面做測試
<!DOCTYPE html><html><head lang="zh-CN"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title></title> <style> .button { width: 200px; height: 200px; background-color: antiquewhite; margin: 20px; text-align: center; line-height: 200px; } </style></head><body> <div class="button">Button</div> <script> "use strict"; var btn = document.querySelector(‘.button‘); btn.addEventListener(‘click‘, function (event) { console.log(‘OH~!You clicked me~!‘); }, false); var ev = new MouseEvent(‘click‘, { cancelable: true, bubble: true, view: window }); btn.dispatchEvent(ev); </script></body></html>開啟一下這個頁面,並且在開啟控制台的情況下,你就可以看到控制台列印了一句話,證明類比成功了.
如所示:
當然,在構建這個MouseEvent對象的時候還是有很多屬性可以填寫的,不過,可能就是樣本的那幾個比較有用,如果像查看更多的屬性,請查看如下地址
(由於MouseEvent繼承自UIEvent和Event,所以,他也繼承了他們的屬性)
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
https://developer.mozilla.org/en-US/docs/Web/API/UIEvent
https://developer.mozilla.org/en-US/docs/Web/API/Event
想查看MouseEvent()構造器的具體用法,請查看
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent
類比鍵盤事件
開啟控制台,並且重新載入頁面,你就可以看到控制台列印了字母‘A‘
<!DOCTYPE html><html><head lang="zh-CN"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title></title> <style> .button { width: 200px; height: 200px; background-color: antiquewhite; margin: 20px; text-align: center; line-height: 200px; } </style></head><body> <div class="button">Button</div> <script> "use strict"; var btn = document.querySelector(‘.button‘); document.addEventListener(‘keyup‘, function (event) { console.log(String.fromCharCode(event.keyCode)); }, false); var ev = new KeyboardEvent(‘keyup‘, { keyCode: 65 }); document.dispatchEvent(ev); </script></body></html>如下是KeyBoardEvent的詳細說明
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
自訂事件
自訂事件有兩種方法,一種是使用new Event(),另一種是new customEvent()
new Event()
<!DOCTYPE html><html><head lang="zh-CN"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"/><title></title><style> .button { width: 200px; height: 200px; background-color: antiquewhite; margin: 20px; text-align: center; line-height: 200px; }</style></head><body><div class="button">Button</div><script> "use strict"; var btn = document.querySelector(‘.button‘); var ev = new Event(‘test‘, { bubbles: ‘true‘, cancelable: ‘true‘ }); btn.addEventListener(‘test‘, function (event) { console.log(event.bubbles); console.log(event.cancelable); console.log(event.detail); }, false); btn.dispatchEvent(ev);</script></body></html>運行效果如下所示,請先注意,event.detail的值為undefined
new customEvent()
<!DOCTYPE html><html><head lang="zh-CN"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"/><title></title><style> .button { width: 200px; height: 200px; background-color: antiquewhite; margin: 20px; text-align: center; line-height: 200px; }</style></head><body><div class="button">Button</div><script> "use strict"; var btn = document.querySelector(‘.button‘); var ev = new CustomEvent(‘test‘, { bubbles: ‘true‘, cancelable: ‘true‘, detail: ‘tcstory‘ }); btn.addEventListener(‘test‘, function (event) { console.log(event.bubbles); console.log(event.cancelable); console.log(event.detail); }, false); btn.dispatchEvent(ev);</script></body></html>效果如
可以很明顯的看到,其實new customEvent()比new Event()多了可以在event.detail屬性裡攜帶自訂資料的功能(event.detail的值為tcstory),這就是差別了.
Event()的詳細說明
https://developer.mozilla.org/en-US/docs/Web/API/Event/Event
customEvent() 的詳細說明
https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent
總結下來發現,除了類比自訂事件比較有用的話,類比滑鼠事件和鍵盤事件則好像有點坑和不一致性.以類比鍵盤事件來說吧.
KeyboardEvent.key在MDN上的文檔被提示為推薦使用的屬性,而KeyboardEvent.keyCode卻被說成是不推薦使用的,應該使用key屬性,然而你去看KeyboardEvent.key的文檔就會發現,這個屬性壓根就沒得到多少瀏覽器的支援,如果用這個屬性,簡直就是掉坑裡了.
所示,一大片的紅字啊
js原生建立類比事件和自訂事件的方法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
