`
cakin24
  • 浏览: 1328526 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

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


 
  • 大小: 2.2 KB
1
1
分享到:
评论

相关推荐

    JAVA WEB 开发详解:XML+XSLT+SERVLET+JSP 深入剖析与实例应用.part2

    3.2.1 dom结构模型 47 3.2.2 dom解析器工厂 50 3.2.3 jaxp的错误类和异常类 52 3.2.4 用dom解析xml文档实例 53 3.3 使用sax解析xml文档 65 3.3.1 sax的处理机制 66 3.3.2 配置sax解析器 69 3.3.3 sax解析器...

    JAVA WEB 开发详解:XML+XSLT+SERVLET+JSP 深入剖析与实例应用.part3

    3.2.1 dom结构模型 47 3.2.2 dom解析器工厂 50 3.2.3 jaxp的错误类和异常类 52 3.2.4 用dom解析xml文档实例 53 3.3 使用sax解析xml文档 65 3.3.1 sax的处理机制 66 3.3.2 配置sax解析器 69 3.3.3 sax解析器...

    JAVA WEB 开发详解:XML+XSLT+SERVLET+JSP 深入剖析与实例应用.part4

    3.2.1 dom结构模型 47 3.2.2 dom解析器工厂 50 3.2.3 jaxp的错误类和异常类 52 3.2.4 用dom解析xml文档实例 53 3.3 使用sax解析xml文档 65 3.3.1 sax的处理机制 66 3.3.2 配置sax解析器 69 3.3.3 sax解析器...

    JAVA WEB 开发详解:XML+XSLT+SERVLET+JSP 深入剖析与实例应用.part5

    3.2.1 dom结构模型 47 3.2.2 dom解析器工厂 50 3.2.3 jaxp的错误类和异常类 52 3.2.4 用dom解析xml文档实例 53 3.3 使用sax解析xml文档 65 3.3.1 sax的处理机制 66 3.3.2 配置sax解析器 69 3.3.3 sax解析器...

    大名鼎鼎的IBM公司 Ajax 培训资料

    最后还有 DOM,即文档对象模型。可能对有些读者来说 DOM 有点儿令人生畏,HTML 设计者很少使用 它,即使 JavaScript 程序员也不大用到它,除非要完成某项高端编程任务。大量使用 DOM 的是 复杂 的 Java 和 C/C++ ...

    Java语言基础下载

    文档对象模型(DOM)解析实例 402 DOM对象 404 DOM解析的例子: 406 SAX解析实例 409 DOM4J解析实例 412 JDOM解析实例 413 JAVA操纵XML 实例讲解 414 通过JAVA写数据到XML里面 415 内容总结 418 独立实践 418 第二十...

    java面试题

    EJB用于服务端的应用开发,而JavaBean用于客户端应用开发。 触发器? 答:触发器是一种特殊的存储过程,主要通过事件来触发而被执行。 什么是存储过程?用什么调用? 答:存储过程是一个预编译的SQL语句,优点是允许...

    java web技术开发大全(最全最新)

    2.3.1 JSP模型1和JSP模型2 2.3.2 Web应用程序需要的基础服务 2.3.3 MVC模式概述 2.3.4 常用的MvC框架 2.4 小结 第3章 Web开发中的客户端技术 3.1 常用的JavaScriptIDE简介 3.1.1 在MyEclipse中使用...

    PHP和MySQL WEB开发(第4版)

    1.2 创建一个示例应用:Bob汽车零部件商店 1.2.1 创建订单表单 1.2.2 表单处理 1.3 在HTML中嵌入PHP 1.3.1 使用PHP标记 1.3.2 PHP语句 1.3.3 空格 1.3.4 注释 1.4 添加动态内容 1.4.1 调用函数 1.4.2 使用date()函数...

    PHP和MySQL Web开发第4版pdf以及源码

    1.2 创建一个示例应用:Bob汽车零部件商店 1.2.1 创建订单表单 1.2.2 表单处理 1.3 在HTML中嵌入PHP 1.3.1 使用PHP标记 1.3.2 PHP语句 1.3.3 空格 1.3.4 注释 1.4 添加动态内容 1.4.1 调用函数 1.4.2 使用...

    PHP和MySQL Web开发第4版

    1.2 创建一个示例应用:Bob汽车零部件商店 1.2.1 创建订单表单 1.2.2 表单处理 1.3 在HTML中嵌入PHP 1.3.1 使用PHP标记 1.3.2 PHP语句 1.3.3 空格 1.3.4 注释 1.4 添加动态内容 1.4.1 调用函数 1.4.2 使用...

    java web开发技术大全

    2.3.1 JSP模型1和JSP模型2 2.3.2 Web应用程序需要的基础服务 2.3.3 MVC模式概述 2.3.4 常用的MvC框架 2.4 小结 第3章 Web开发中的客户端技术 3.1 常用的JavaScriptIDE简介 3.1.1 在MyEclipse中...

    Web安全深度剖析(张柄帅)

    全书分4 篇共16 章,除介绍Web 安全的基础知识外,还介绍了Web 应用程序中最常见的安全漏洞、开源程序的攻击流程与防御,并着重分析了“拖库”事件时黑客所使用的攻击手段。此外,还介绍了渗透测试工程师其他的一些...

    JAVA面试题最全集

    IS09000和CMM(软件能力成熟度模型)认证是国际上通用的软件质量评估方法.CMM的五个成熟度等级。 第一,谈谈final, finally, finalize的区别。 final?修饰符(关键字)如果一个类被声明为final,意味着它不能再...

Global site tag (gtag.js) - Google Analytics