js原生創建模擬事件和自定義事件的方法

讓我萬萬沒想到的是,原來《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>
```
打開一下這個頁面,並且在打開控制台的情況下,你就可以看到控制台打印了一句話,證明模擬成功了.
如下圖所示:

Screenshot from 2015-05-19 12:20:40.png

當然,在構建這個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

Screenshot from 2015-05-19 12:37:01.png

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>

效果如下圖

Screenshot from 2015-05-19 12:40:30.png

可以很明顯的看到,其實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的文檔就會發現,這個屬性壓根就沒得到多少瀏覽器的支持,如果用這個屬性,簡直就是掉坑里了.
下圖所示,一大片的紅字啊

Screenshot from 2015-05-19 12:48:15.png

js原生創建模擬事件和自定義事件的方法

免責聲明！