DOM模型轉發事件應用

一 介紹
DOM提供了dispatchEvent方法用於事件的轉發,該方法屬於Node對象,因此DOM的每個Node都可以調用該方法,從而將事件直接轉發到本節點。
 
二 代碼
<!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>
 
三 運行結果
單擊按鈕1的運行效果如下:


 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章