<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 轉發事件 </title> </head> <body> <!-- 測試用的第一個按鈕 --> <input id="bn1" type="button" value="按鈕1" /> <!-- 測試用的第二個按鈕 --> <input id="bn2" type="button" value="按鈕2" /> <div id="show"></div> <script type="text/javascript"> // 第一個按鈕被單擊時的事件處理函數 var rd = function(evt) { document.getElementById("show").innerHTML += '事件冒泡階段:' + evt.currentTarget.value + "被單擊了<br />"; // 創建一個普通事件 var e = document.createEvent("Events"); // 初始化事件對象,指定該事件支持冒泡,不允許取消默認行爲 e.initEvent("click", true, false); // 將事件轉發到按鈕bn2 document.getElementById("bn2").dispatchEvent(e); } // 第二個按鈕被單擊時的事件處理函數 var gotClick = function(evt) { document.getElementById("show").innerHTML += '事件冒泡階段:' + evt.currentTarget.value + "<br />"; } // 分別爲兩個按鈕綁定事件處理函數 document.getElementById("bn1") .addEventListener("click", rd, false); document.getElementById("bn2") .addEventListener("click", gotClick, false); </script> </body> </html>
DOM模型轉發事件應用
一 介紹
DOM提供了dispatchEvent方法用於事件的轉發,該方法屬於Node對象,因此DOM的每個Node都可以調用該方法,從而將事件直接轉發到本節點。
二 代碼
三 運行結果
單擊按鈕1的運行效果如下:
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.