`
cakin24
  • 浏览: 1388148 次
  • 性别: 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
分享到:
评论

相关推荐

    综合JPA,spring2.5.6,dom,struts1,struts2的jar包

    Struts 1和Struts 2是两个不同的MVC(模型-视图-控制器)框架,用于构建Web应用程序。Struts 1是早期流行的Java Web框架,它通过Action类处理HTTP请求,并将结果转发到指定的JSP页面。然而,随着技术的发展,Struts ...

    一个基于koa和react开发Web聊天应用

    5. **部署**:最后,应用需要部署到服务器,例如使用Nginx作为反向代理,将静态资源和API请求分别转发到React构建结果和Koa服务器。 综上所述,通过Koa和React的组合,我们可以构建出一个高效、响应式的Web聊天应用...

    使用emitter.io构建的简单聊天应用程序-JavaScript-HTML-下载

    3. **JavaScript编程**:掌握基本的JavaScript语法,包括异步操作、DOM操作、事件监听等,以便处理用户输入和响应服务器事件。 4. **HTML和CSS**:了解如何使用HTML标记构建聊天界面,包括输入框、按钮和消息列表,...

    ReactTypeScriptNodejs开发的参考应用程序

    Node.js以其非阻塞I/O和事件驱动的模型著称,特别适合处理大量的并发连接,因此在实时通信、API服务器等领域应用广泛。 在这个"socketio-react-chat-master"的项目中,我们可以猜测它是一个使用Socket.IO实现的实时...

    mvc三层架构应用案例简单代码

    它可以验证用户输入,处理DOM(文档对象模型),实现页面的动态效果。 **应用案例分析** "brand-demo"可能是项目的一个模块,可能包含品牌管理的相关功能。在这个案例中,用户可能通过HTML表单提交请求,Servlet...

    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解析器...

    基于MVC用JSPServlet实现JPetStore实验报告+使用AJAX和jQuery改善用户体验实验报告.doc

    jQuery则是一个流行的JavaScript库,简化了DOM操作、事件处理和AJAX交互。 在JPetStore应用中,可以使用AJAX来异步加载商品信息,例如,当用户滚动页面时,可以动态加载更多产品,而不是一次性加载所有内容,这减少...

    ZK 6.5 Essentials

    在这种模型下,应用程序响应用户的操作或系统事件来更新UI状态。当用户触发一个事件(如点击按钮),ZK框架会自动将该事件转发到相应的组件,由组件内部的事件处理器进行处理。这种机制使得开发者可以专注于业务逻辑...

    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解析器...

    spring mvc应用之用户管理系统

    Spring MVC是一种基于模型-视图-控制器(MVC)设计模式的Web应用框架。它的主要组件包括DispatcherServlet、Model、View和Controller。DispatcherServlet是入口点,负责接收请求并分发到相应的处理器。Model用于存储...

    java学习资料集合梁建全老师(js+jsp+jqurey+Struts2+hibernate+Spring+jdbc+java基础等)

    JavaScript用于创建交互式网页,涵盖DOM操作、事件处理、AJAX异步通信等内容。 "Java相关课程系列笔记之十JSP学习笔记"是关于JavaServer Pages(JSP)的,JSP是Java Web开发中的视图层技术,允许在HTML中嵌入Java...

    onos代码

    6. **事件模型**:ONOS基于发布/订阅模型的事件系统,确保在系统中传播网络状态变更和其他重要信息。 在描述中提到的前端技术,如D3、AngularJS和jQuery,是构建ONOS用户界面的关键部分: - **D3 (Data-Driven ...

    实验二 简单Web网页应用参考答案.zip

    理解变量、函数、事件监听和DOM操作是JavaScript编程的基础。 4. **服务器端技术**:虽然标题没有明确指出使用了哪种服务器端技术,但在创建Web应用时,通常会涉及到如PHP或Python等后端语言。这些语言负责处理用户...

    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解析器...

    Java学习笔记CCS AJAX DMS JSP servlet JavaScript等中文笔记整理.rar

    笔记可能涵盖了XMLHttpRequest对象的使用、JSON数据格式、DOM操作和事件处理等相关知识。 DMS(Data Management System)指的是数据管理系统,它通常是指数据库管理系统,用于存储、管理和检索数据。笔记可能涉及...

    SSH+ajax+jquery面试实例

    **Spring框架**:Spring是Java企业级应用的核心框架,提供了一个全面的编程和配置模型,用于现代JavaEE应用程序。它强调代码的可测试性,并通过依赖注入(DI)和面向切面编程(AOP)来减少耦合。Spring还提供了对...

    struts2+jquery无刷新取后台数据

    Struts2是一个强大的MVC(模型-视图-控制器)框架,它被广泛应用于Java Web开发中,提供了灵活的架构来构建可维护性和扩展性良好的应用程序。jQuery则是一款高效的JavaScript库,简化了DOM操作、事件处理和动画效果...

    java高级框架

    在JQueryTest中,可能包含的是使用jQuery进行前端交互的示例,jQuery是一个轻量级的JavaScript库,它可以简化DOM操作、事件处理、动画效果,提升Web应用程序的用户体验。 总的来说,掌握SSH框架是Java开发者的必备...

Global site tag (gtag.js) - Google Analytics