- 浏览: 1052848 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (279)
- Apache net (10)
- JBoss Rules (3)
- Seam ACL (1)
- Seam (14)
- Seam JPA高级权限验证 (8)
- 待解决的问题.... (1)
- JAVA (43)
- Dwr (4)
- Ajax4JSF (1)
- JavaScript (27)
- 生活小常识 (17)
- Richfaces (3)
- seam自己经历 (14)
- JDBC (1)
- mysql (6)
- WebService (10)
- Java Web (4)
- Hibernate (13)
- J2EE框架整合 (3)
- Spring (9)
- BEA Weblogic (1)
- XML (1)
- log4j (6)
- CSS (2)
- javaIO文件的读写 (5)
- SVN服务器的安装 (5)
- powerDesigner (2)
- SQL常用语句 (3)
- wicket初学 (5)
- eclipse (7)
- 正则表达式 (1)
- ExtJS (6)
- maven(m2eclipse) (1)
- struts2.0 (9)
- JPA (6)
- struts2.0整合spring2.5 (9)
- linux (6)
- Oracle (5)
- Servlet (3)
- MyEclipseGen (0)
最新评论
-
qq_31247573:
JAVA 获取http返回XML的数据 -
jasmine_20100810:
...
linux下tomcat服务的启动、关闭与错误跟踪 -
weiaiFang0624:
视频下载地址:http://download.csdn.net ...
there is no action mapped for namespace / and action name解决办法 -
p476462534:
JS控制表单form的提交 -
dandongsoft:
aaaaaaaaaaaaaaa
httpClient,JAVA访问http request response
代码一:普通的写法(简单写法)
<html> <title></title> <head> <script type="text/javascript"> function clickme(){ alert(88); } </script> </head> <body> <div id="click" onclick="javascript:clickme();">click me</div> </body> </html>
代码二:有时候可以解决跨浏览器的写法(要掌握这种写法的思想)。这种写法叫“事件的监听”。
<html> <title></title> <head> <script type="text/javascript"> window.onload = function(){ var obj = document.getElementById("click"); obj.onclick = function(){ alert(55); } } </script> </head> <body> <div id="click">click me</div> </body> </html>
这里的window.onload表示页面加载的时候来调用,这种写法相当于在body里面加入<body onload="javascript:clickme();" ></body>,但是上面的window.onload适合于没有<body>标签的情况。比如JSP页面中的top.jsp或者bottom.jsp等等。
Dom的“事件监听”:
上面的那个“事件监听”的写法非常单一,它只能给<div>标签添加一个“事件监听”,而不能添加多个“事件监听”。下面介绍的两种方法都可以添加多个“事件监听”。
1. 只适合于IE浏览器的“事件监听”。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>IE的监听函数</title> <script language="javascript"> function fnClick(){ alert("我被点击了"); oP.detachEvent("onclick",fnClick); //点击了一次后删除监听函数 } var oP; window.onload = function(){ oP = document.getElementById("myP"); //找到对象 oP.attachEvent("onclick",fnClick); //添加监听函数 } </script> </head> <body> <div> <p id="myP">Click Me</p> </div> </body> </html>
2.适合于所有的浏览器的"事件监听"。 下面函数中的"false"表示:“冒泡型事件”而不是“捕获型事件”。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>标准DOM的事件监听</title> <script language="javascript"> function fnClick1(){ alert("我被fnClick1点击了"); //oP.removeEventListener("click",fnClick2,false); //删除监听函数2 } function fnClick2(){ alert("我被fnClick2点击了"); } var oP; window.onload = function(){ oP = document.getElementById("myP"); //找到对象 oP.addEventListener("click",fnClick1,false); //添加监听函数1 oP.addEventListener("click",fnClick2,false); //添加监听函数2 } </script> </head> <body> <div> <p id="myP">Click Me</p> </div> </body> </html>
Dom的“事件类型”:
IE浏览器的事件对象是window对象的一个属性event。
op.onclick = function(){
var oEvent = window.event;
}
而Dom中规定event对象必须作为唯一的参数传递给事件处理函数。
op.onclick = function(oEvent){
//....
}
所以为了解决浏览器的兼容问题:采用如下方法:
op.onclick = function(oEvent){
if(window.event) oEvent = window.event;
}
例子如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>事件的类型</title> <script language="javascript"> function handle(oEvent){ var oDiv = document.getElementById("display"); if(window.event) oEvent = window.event; //处理兼容性,获得事件对象 if(oEvent.type == "click") //检测事件名称 oDiv.innerHTML += "你点击了我  "; else if( oEvent.type == "mouseover") oDiv.innerHTML += "你移动到我上方了  "; } window.onload = function(){ var oImg = document.getElementsByTagName("img")[0]; oImg.onclick = handle; oImg.onmouseover = handle; } </script> </head> <body> <img src="01.jpg" border="0"> <div id="display"></div> </body> </html>
发表评论
-
JS窗口改变触发事件
2011-04-28 17:32 6777var resizeTime ... -
js动态生成表格,然后清空
2011-04-11 16:41 3426var tBodyObj = document.getElem ... -
Javascript刷新页面的几种方法
2010-07-02 15:48 3954Javascript刷新页面的几种 ... -
JS客户端验证
2010-03-26 17:24 1245demo1: <html> <head& ... -
form表单提交2次的原因
2010-03-24 14:32 86311.第一种写法: (1)<form name=&quo ... -
如何判断年龄大于18岁
2010-03-14 15:09 36101.jquery的实现方式: 下面这个: (1)var b ... -
java IE火狐兼容添加到收藏夹 IE7浏览器状态栏报错,"找不到元素"或者"没有权限"
2010-03-08 11:58 4185java IE火狐兼容添加到收藏夹的java代码: func ... -
JS来获取页面的URL top.location.href 和 window.location.href
2010-03-03 11:31 10848JS来获取页面的URL: (1)普通的格式是:window. ... -
JS如何关闭flash代码
2010-01-20 17:53 51191.在index.html页面的<hea ... -
document.documentElement.scrollTop
2010-01-19 16:42 4228要获取当前页面的滚动条纵坐标位置,用: docume ... -
JQuery 模式对话框DIV
2010-01-19 16:40 3263<!DOCTYPE html PUBLIC " ... -
JQuery 随鼠标滚动条滚动的div
2010-01-19 15:56 4801<!DOCTYPE html PUBLIC " ... -
JS中定义变量i自增长
2009-12-07 10:37 2037<script> var i = 1; f ... -
用iframe来实现一个页面嵌套另一个页面
2009-12-06 10:04 3552用iframe来实现一个页面嵌套另一个页面,以此来实现页面局部 ... -
(全选)多选按钮的JS实现 单选按钮
2009-11-13 10:53 116581.代码:(全选)多选按钮 ... -
JS创建数组的方法
2009-11-12 10:21 32078var myArray = new Array(); va ... -
JS和JSP的共同使用(JS的字符串定义、null值的判断、变量的定义)
2009-11-10 11:32 80581.signin.jsp <% String ... -
JS如何传参的问题
2009-11-03 11:11 38091. 页面:这里需要注意radio不能写id,如果写了id的属 ... -
CMS模板发布中的div框
2009-11-02 23:04 1243<div id="createFile&quo ... -
JS特效(可拖动的div框)和用AJAX实现的可拖动的div框
2009-11-02 22:44 20621. 页面中的部分: <div id="di ...
相关推荐
Chrome浏览器作为一款广泛使用的Web浏览器,提供了强大的开发者工具来帮助开发者进行网页调试和优化,其中包括查找并分析DOM节点上的事件监听器。本教程将围绕“如何在Chrome中根据DOM找到DOM上的事件”这一主题展开...
4. 视口可见性变化:若关心元素是否在视口内,可以使用`scroll`事件和`Intersection Observer API`。 下面是一个监听尺寸变化的例子: ```javascript $("#myDiv").on("resize", function() { // 这里的代码会在...
DOM2级事件模型引入了事件目标、事件监听器和事件对象,使得事件处理更加灵活。 ### 2. 自定义事件模型 要实现一个简单的DOM事件模型,我们需要关注以下几个关键点: - **事件注册**:为DOM元素添加事件监听器。 ...
在JavaScript的世界里,jQuery库为开发者提供了方便快捷的方式来操作DOM、处理事件、执行动画和Ajax交互。其中,监听键盘事件是常见的用户交互处理之一。本文将深入探讨如何使用jQuery来监听键盘事件,以及相关的...
本文将探讨如何利用jQuery实现一个技巧,使得任何组件都能够支持类似于DOM事件的管理,包括事件派发、添加/删除监听器、事件冒泡和阻止默认行为。 首先,我们来看传统的发布-订阅模式。这种模式通常用于实现组件间...
7. **事件委托**: 通过在父元素上监听事件,然后根据事件的目标子元素来处理,可以减少事件监听器的数量,提高性能。 8. **自定义事件**: 通过`CustomEvent`构造函数可以创建自定义事件,允许在代码中触发自定义的...
4. **灵活性**:可能支持添加自定义事件类型,或者提供了灵活的事件绑定和解绑方式,以适应不同的应用场景。 5. **性能优化**:可能包括事件目标的判断优化,避免不必要的计算,以及利用事件捕获阶段或阻止冒泡来...
以上内容中包含了对DOM中各种对象的属性和方法的使用,BOM模型的核心对象window及其常用方法,JavaScript中的事件处理机制,包括事件是如何产生的、事件对象的特性以及事件冒泡现象,以及面向对象编程的基础知识,...
这里你可以看到“click”事件和其他各种事件,以及它们对应的DOM节点。 **2. 查找事件源** 当你知道事件类型后,可以回到“Elements”选项卡。在DOM树中找到你感兴趣的元素,选中它。此时,如果你在该元素上触发了...
Angular4.x版本对事件的处理,特别是DOM事件和自定义事件的绑定与处理,有着详细的机制和约定。本文将详细讨论如何在Angular中处理这两种类型的事件,包括事件冒泡的概念,以及如何使用@Output()装饰器和...
这在批量操作元素,如改变样式或添加事件监听器时非常有用。 2. `map()`:创建一个新的数组,新数组中的元素是原始数组元素经过函数处理后的结果。在DOM操作中,这可用于生成新的DOM节点集合。 3. `filter()`:...
`.bind(type,fn)`方法用于将一个或多个事件监听器绑定到选择器匹配的元素上,其中`type`是事件类型,`fn`是当事件触发时执行的函数。而`.click()`则是一个简写方式,它只绑定点击事件。例如,`$('#d1').click...
这里的`element`是你想要监听事件的DOM元素,`eventName`是你要监听的事件类型,`callbackFunction`是在事件触发时执行的函数。例如,给按钮添加点击事件监听器: ```html 点击我 ``` ```javascript document....
DOMEvent接口定义了事件处理机制,包括事件类型、事件属性和事件传播模型。这使得开发者可以创建事件监听器,响应用户的输入和页面的状态变化。 #### DOM 样式引用 DOMStyle接口和相关的对象如`...
2. **事件处理**:详述DOM事件模型,包括事件类型、事件目标、事件传播和事件处理函数。 3. **CSS和样式**:解释如何通过DOM访问和修改元素的CSS样式。 4. **遍历和操作**:指导如何遍历DOM树,添加、删除或修改节点...
8. **DOM变更事件**: 当DOM结构发生变化时,可以监听 `DOMContentLoaded`, `DOMNodeInserted`, `DOMNodeRemoved` 等事件。 9. **DOM遍历和修改**: `createDocumentFragment()` 可用于在内存中构建DOM片段,减少页面...
在JavaScript的世界里,jQuery是一个非常流行的库,它简化了DOM操作、事件处理和Ajax交互等任务。本篇文章将深入探讨如何使用jQuery监听页面上的按钮事件,以实现丰富的用户交互。 一、jQuery的基本概念 jQuery是...
6. **全局AJAX事件**: 如`ajaxStart()`, `ajaxStop()`, `ajaxSuccess()`, `ajaxError()`,可以监听所有AJAX请求的状态,实现全局的控制和反馈。 通过深入理解并熟练运用jQuery的DOM操作和AJAX功能,开发者能够构建...
总结来说,DOM0级事件和DOM2级事件的主要区别在于,DOM0级只能为每个事件类型绑定一个处理函数,而DOM2级允许绑定多个处理函数并且不会相互覆盖。这两种机制在不同的场景下都有它们的应用价值,但随着现代Web应用对...
学习如何在DOM元素上绑定事件和编写事件处理函数是提高网页交互性的关键。 6. DOM编程实践:通过实例演示如何使用JavaScript的DOM API来实现各种动态网页效果,比如创建动态的导航菜单、表单验证、内容的异步加载...