2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

JavaScript 的事件處理是所有瀏覽器端程序的基本必備技巧。當(dāng)目標(biāo)元素的事件被觸發(fā)時(shí)，比如按鈕被點(diǎn)擊，鼠標(biāo)移動(dòng)，或者是表單提交，這些事件觸發(fā)時(shí)都可以觸發(fā)對(duì)應(yīng)的方法。當(dāng)然這個(gè)過程中我們可以傳遞一些參數(shù)過去來自定義很多事情。
一個(gè)要注意避免的就是事件與DOM元素的緊耦合。比如先看看下面這個(gè)代碼，考慮到用一個(gè)簡單表單來接受用戶輸入的信息。

1 2 3 4 5

<form?id="msgbox"action="#"method="get"> <label for="msg">your message</label> <input id="msg"value=""/> <button>SEND</button> </form>

我們能寫一段代碼讓屏幕上顯示剛才表單提交的信息

1 2 3 4 5 6 7

document.getElementById("msgbox").addEventListener("submit",?function(e) { e.preventDefault(); varmsg = e.currentTarget.getElementById("msg").value.trim(); if(msg) { alert(msg); } },?false);

那么如果我們想對(duì)顯示出來的這句話做一些操作，比如發(fā)一條tweet，或存儲(chǔ)在服務(wù)器或者干些其他什么？則有兩個(gè)選擇： 1，對(duì)已有的事件處理方法添加代碼 ? ?這個(gè)方案的缺陷就是每當(dāng)打算測試或者更新后來添加的事件處理方法時(shí)變得非常不彈性化，每當(dāng)更改或者刪除一些功能的時(shí)候，總會(huì)有一大段代碼要跟著去修改。
2，為每一個(gè)功能都創(chuàng)建事件處理方法 ? ?第二個(gè)方法很好的解決了前面方法的問題，雖然這個(gè)方法可能會(huì)一開始麻煩點(diǎn)。畢竟所有的方法代碼都要處理重復(fù)的消息提取以及驗(yàn)證步驟。
設(shè)想假如能夠自行觸發(fā)自定義的"newMessage"事件而無需驗(yàn)證是否有message提交，或假如能監(jiān)控整個(gè)HTML文檔或者body這樣的標(biāo)簽而不僅僅只是某個(gè)表單的節(jié)點(diǎn)，能否做到呢？這就是自定義事件要解決的問題了。
自行觸發(fā)一個(gè)自定義事件是很簡單的；如下代碼就是傳遞一個(gè)name,details以及options到新建的 CustomEvent對(duì)象中:

1 2 3 4 5 6 7 8 9 10 11

var event =?newCustomEvent( "newMessage", { detail: { message:?"Hello World!", time:?newDate(), }, bubbles:?true, cancelable:?true } );

這個(gè)案例中，"newMessage"是一個(gè)自定義事件類型。而第二個(gè)參數(shù)包含了此對(duì)象的三個(gè)屬性(detail,bubbles,cancelable)。
detail: 包含了自定義事件的具體信息，這里僅僅就包括了一個(gè)message與一個(gè)time bubbles: 如果是true，則事件會(huì)一直傳遞給自身的父對(duì)象元素，接著父對(duì)象也會(huì)觸發(fā)此類事件 cancelable: 如果是true, 事件可以被事件觸發(fā)元素的 stopPropagation( ) 方法停止
現(xiàn)在，我們需要針對(duì)某個(gè)特定元素來觸發(fā)此類事件。

1	document.getElementById("msgbox").dispatchEvent(event);

可以用以下代碼訂閱這個(gè)事件的處理。

1	document.addEventListener("newMessage", newMessageHandler,?false);

展示頁 查看自定義事件的展示頁 一個(gè)標(biāo)準(zhǔn)的事件處理方法將會(huì)查看提交到HTML表單的所有信息。下面這個(gè)方法先獲取當(dāng)前的消息，假設(shè)它已經(jīng)被驗(yàn)證，最后自行觸發(fā)一個(gè)新的"newMessage"的事件。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

var msgbox = document.getElementById("msgbox"); msgbox.addEventListener("submit", SendMessage,?false); // new message: raise newMessage event function SendMessage(e) { e.preventDefault(); varmsg = document.getElementById("msg").value.trim(); if(msg && window.CustomEvent) { varevent =?newCustomEvent("newMessage", { detail: { message: msg, time:?newDate(), }, bubbles:?true, cancelable:?true }); e.currentTarget.dispatchEvent(event); } }

所有的事件處理方法都可以訂閱來處理那個(gè) newMessage 事件。

1 2 3 4 5 6 7 8 9

// listen for newMessage event document.addEventListener("newMessage", newMessageHandler,?false); // newMessage event handler functionnewMessageHandler(e) { LogEvent( "Event subscriber on "+e.currentTarget.nodeName+", " +e.detail.time.toLocaleString()+": "+e.detail.message ); }

瀏覽器能力 不過上面這個(gè) CustomEvent對(duì)象只有在 Chrome, FireFox以及Opera才能正常使用。而下一個(gè)版本的Safari也支持了。IE9以及更低版本暫時(shí)是不支持的。

轉(zhuǎn)載于:https://my.oschina.net/thinkive/blog/644698

總結(jié)

以上是生活随笔為你收集整理的如何在JavaScript中使用自定义事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。