DOM模型转发事件应用

雨点打透心脏的1/2处 2022-05-12 00:44 220阅读 0赞

**一 介绍**

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的运行效果如下：

![34b54881-73dd-3e19-a6fa-1d873eb47776.png][]

[34b54881-73dd-3e19-a6fa-1d873eb47776.png]: /images/20220512/bb32f749781a442590507e09a7a05bff.png