- 浏览: 1599975 次
- 性别:
文章分类
- 全部博客 (2929)
- 非技术 (18)
- Eclipse (11)
- JAVA (31)
- 正则表达式 (0)
- J2EE (4)
- DOS命令 (2)
- WEB前端 (52)
- JavaScript (69)
- 数据库 (8)
- 设计模式 (0)
- JFreechart (1)
- 操作系统 (1)
- 互联网 (10)
- EasyMock (1)
- jQuery (5)
- Struts2 (12)
- Spring (24)
- 浏览器 (16)
- OGNL (1)
- WebService (12)
- OSGi (14)
- 软件 (10)
- Tomcat (2)
- Ext (3)
- SiteMesh (2)
- 开源软件 (2)
- Hibernate (2)
- Quartz (6)
- iBatis (2)
最新评论
事件
HTML元素事件是浏览器内在自动产生的,当有事件发生时html元素会向外界(这里主要指元素事件的订阅者)发出各种事件,如click,onmouseover,onmouseout等等。
DOM事件流
DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素结点与根结点之间的路径传播,路径所经过的结点都会收到该事件,这个传播过程可称为DOM事件流。
主流浏览器的事件模型
早在2004前在HTML元素事件的订阅,发送,传播,处理模型上各浏览器实现并不一致,直到DOM Level3中规定后,多数主流浏览器才陆陆续续支持DOM标准的事件处理模型 — 捕获型与冒泡型。
目前除IE浏览器外,其它主流的Firefox,
Opera,Safari都支持标准的DOM事件处理模型。IE仍然使用自己的模型,即冒泡型,它模型的一部份被DOM采用,这点对于开发者来说也是有好
处的,只使用DOM标准,IE都共有的事件处理方式才能有效的跨浏览器。
冒泡型事件(Bubbling)
这是IE浏览器对事件模型的实现,也是最容易理解的,至少笔者觉得比较符合实际的。冒泡,顾名思义,事件像个水中的气泡一样一直往上冒,直到顶端。从
DOM树型结构上理解,就是事件由叶子结点沿祖先结点一直向上传递直到根结点;从浏览器界面视图HTML元素排列层次上理解就是事件由具有从属关系的最确
定的目标元素一直传递到最不确定的目标元素.
捕获型事件(Capturing)
Netscape Navigator的实现,它与冒泡型刚好相反,由DOM树最顶层元素一直到最精确的元素,这个事件模型对于开发者来说(至少是我..)有点费解,因为直观上的理解应该如同冒泡型,事件传递应该由最确定的元素,即事件产生元素开始。
但这个模型在某些情况下也是很有用的,接下来会讲解到。
DOM标准事件模型
因为两个不同的模型都有其优点和解释,DOM标准支持捕获型与冒泡型,可以说是它们两者的结合体。它可以在一个DOM元素上绑定多个事件处理器,并且在处理函数内部,this关键字仍然指向被绑定的DOM元素,另外处理函数参数列表的第一个位置传递事件event对象。
首先是捕获式传递事件,接着是冒泡式传递,所以,如果一个处理函数既注册了捕获型事件的监听,又注册冒泡型事件监听,那么在DOM事件模型中它就会被调用两次。
注册与移除事件监听器
注册事件监听器,或又称订阅事件,当元素事件发生时浏览器回调该监听函数执行事件处理。目前主流浏览器中有两种注册事件的方法,一种是IE浏览器的,另一种是DOM标准的。
1.直接JS或HTML挂载法
<div
onclick
="alert(this.innerHTML);"
>
</div>
element.onclick
=
function
(
)
{
alert
(
this
.innerHTML
)
;
}
移除时将事件属性设为nul即可,这个也是最常用的方法了,优缺点也是显然的:
- 简单方便,在HTML中直接书写处理函数的代码块,在JS中给元素对应事件属性赋值即可
- IE与DOM标准都支持的一种方法,它在IE与DOM标准中都是在事件冒泡过程中被调用的。
- 可以在处理函数块内直接用this引用注册事件的元素
- 要给元素注册多个监听器,就不能用这方法了
2. IE下注册多个事件监听器与移除监听器方法
IE浏览器中HTML元素有个attachEvent方法允许外界注册该元素多个事件监听器,例如
element.attachEvent
(
'onclick'
,
observer)
;
attachEvent接受两个参数。第一个参数是事件名称,第二个参数observer是回调处理函数。这里得说明一下,有个经常会出错的地方,IE下
利用attachEvent注册的处理函数调用时this指向不再是先前注册事件的元素,这时的this为window对象了,笔者很奇怪IE为什么要这
么做,完全看不出好处所在。
要移除先前注册的事件的监听器,调用element的detachEvent方法即可,参数相同。
element.detachEvent
(
'onclick'
,
observer)
;
3. DOM标准下注册多个事件监听器与移除监听器方法
实现DOM标准的浏览器与IE浏览器中注册元素事件监听器方式有所不同,它通过元素的addEventListener方法注册,该方法既支持注册冒泡型事件处理,又支持捕获型事件处理。
element.addEventListener
(
'click'
,
observer,
useCapture)
;
addEventListener方法接受三个参数。第一个参数是事件名称,值得注意的是,这里事件名称与IE的不同,事件名称是没’on’开头的;第二个参数observer是回调处理函数;第三个参数注明该处理回调函数是在事件传递过程中的捕获阶段被调用还是冒泡阶段被调用
移除已注册的事件监听器调用element的removeEventListener即可,参数不变.
element.removeEventListener
(
'click'
,
observer,
useCapture)
;
跨浏览器的注册与移除元素事件监听器方案
弄清楚DOM标准与IE的注册元素事件监听器之间的异同后,就可以实现一个跨浏览器的注册与移除元素事件监听器方案:
//注册
function
addEventHandler(
element,
evtName,
callback,
useCapture)
{
//DOM标准
if
(
element.addEventListener
)
{
element.addEventListener
(
evtName,
callback,
useCapture)
;
}
else
{
//IE方式,忽略useCapture参数
element.attachEvent
(
'on'
+
evtName,
callback)
;
}
}
//移除
//注册
function
removeEventHandler(
element,
evtName,
callback,
useCapture)
{
//DOM标准
if
(
element.removeEventListener
)
{
element.removeEventListener
(
evtName,
callback,
useCapture)
;
}
else
{
//IE方式,忽略useCapture参数
element.dettachEvent
(
'on'
+
evtName,
callback)
;
}
}
如何取消浏览器事件的传递与事件传递后浏览器的默认处理
先说明取消事件传递与浏览器事件传递后的默认处理是两个不同的概念,可能很多同学朋友分不清,或者根本不存在这两个概念。
取消事件传递是指,停止捕获型事件或冒泡型事件的进一步传递。例如上图中的冒泡型事件传递中,在body处理停止事件传递后,位于上层的document的事件监听器就不再收到通知,不再被处理。
事件传递后的默认处理是指,通常浏览器在事件传递并处理完后会执行与该事件关联的默认动作(如果存在这样的动作)。例如,如果表单中inputtype
属性是 “submit”,点击后在事件传播完浏览器就就自动提交表单。又例如,input 元素的
keydown事件发生并处理后,浏览器默认会将用户键入的字符自动追加到 input 元素的值中。
要取消浏览器的件传递,IE与DOM标准又有所不同。
在IE下,通过设置event对象的cancelBubble为true即可。
function
someHandle(
)
{
window.event
.cancelBubble
=
true
;
}
DOM标准通过调用event对象的stopPropagation()方法即可。
function
someHandle(
event)
{
event.stopPropagation
(
)
;
}
因些,跨浏览器的停止事件传递的方法是:
function
someHandle(
event)
{
event =
event ||
window.event
;
if
(
event.stopPropagation
)
event.stopPropagation
(
)
;
else
event.cancelBubble
=
true
;
}
取消事件传递后的默认处理,IE与DOM标准又不所不同。
在IE下,通过设置event对象的returnValue为false即可。
function
someHandle(
)
{
window.event
.returnValue
=
false
;
}
DOM标准通过调用event对象的preventDefault()方法即可。
function
someHandle(
event)
{
event.preventDefault
(
)
;
}
因些,跨浏览器的取消事件传递后的默认处理方法是:
function
someHandle(
event)
{
event =
event ||
window.event
;
if
(
event.preventDefault
)
event.preventDefault
(
)
;
else
event.returnValue
=
false
;
}
捕获型事件模型与冒泡型事件模型的应用场合
标准事件模型为我们提供了两种方案,可能很多朋友分不清这两种不同模型有啥好处,为什么不只采取一种模型。
这里抛开IE浏览器讨论(IE只有一种,没法选择)什么情况下适合哪种事件模型。
1. 捕获型应用场合
捕获型事件传递由最不精确的祖先元素一直到最精确的事件源元素,传递方式与操作系统中的全局快捷键与应用程序快捷键相似。当一个系统组合键发生时,如果注
册了系统全局快捷键监听器,该事件就先被操作系统层捕获,全局监听器就先于应用程序快捷键监听器得到通知,也就是全局的先获得控制权,它有权阻止事件的进
一步传递。所以捕获型事件模型适用于作全局范围内的监听,这里的全局是相对的全局,相对于某个顶层结点与该结点所有子孙结点形成的集合范围。
例如你想作全局的点击事件监听,相对于document结点与document下所有的子结点,在某个条件下要求所有的子结点点击无效,这种情况下冒泡模型就解决不了了,而捕获型却非常适合,可以在最顶层结点添加捕获型事件监听器,伪码如下:
function
globalClickListener(
event)
{
if
(
canEventPass ==
false
)
{
//取消事件进一步向子结点传递和冒泡传递
event.stopPropagation
(
)
;
//取消浏览器事件后的默认执行
event.preventDefault
(
)
;
}
}
这样一来,当canEventPass条件为假时,document下所有的子结点click注册事件都不会被浏览器处理。
2. 冒泡型的应用场合
可以说我们平时用的都是冒泡事件模型,因为IE只支持这模型。这里还是说说,在恰当利用该模型可以提高脚本性能。在元素一些频繁触发的事件中,如
onmousemove,onmouseover,onmouseout,如果明确事件处理后没必要进一步传递,那么就可以大胆的取消它。此外,对于子结
点事件监听器的处理会对父层监听器处理造成负面影响的,也应该在子结点监听器中禁止事件进一步向上传递以消除影响。
综合案例分析
最后结合下面HTML代码作分析:
<div
id
="div0"
onclick
="alert('current is '+this.id)"
>
<div
id
="div1"
onclick
="alert('current is '+this.id)"
>
<div
id
="div2"
onclick
="alert('current is '+this.id)"
>
<div
id
="event_source"
style
="height: 200px; width: 200px; background-color: red;"
onclick
="alert('current is '+this.id)"
>
</div>
</div>
</div>
</div>
HTML运行后点击红色区域,这是最里层的DIV,根据上面说明,无论是DOM标准还是IE,直接写在html里的监听处理函数是事件冒泡传递时调用的,由最里层一直往上传递,所以会先后出现
current is event_source
current is div2
current is div1
current is div0
current is body
添加以下片段:
var
div2 =
document.getElementById
(
'div2'
)
;
addEventHandler(
div2,
'click'
,
function
(
event)
{
event =
event ||
window.event
;
if
(
event.stopPropagation
)
event.stopPropagation
(
)
;
else
event.cancelBubble
=
true
;
}
,
false
)
;
当点击红色区域后,根据上面说明,在泡冒泡处理期间,事件传递到div2后被停止传递了,所以div2上层的元素收不到通知,所以会先后出现:
current is event_source
current is div2
在支持DOM标准的浏览器中,添加以下代码:
document.body
.addEventListener
(
'click'
,
function
(
event)
{
event.stopPropagation
(
)
;
}
,
true
)
;
以上代码中的监听函数由于是捕获型传递时被调用的,所以点击红色区域后,虽然事件源是ID为event_source的元素,但捕获型选传递,从最顶层开始,body结点监听函数先被调用,并且取消了事件进一步向下传递,所以只会出现
current is body
发表评论
-
Javascript评估用户输入密码的强度的方法 代码
2009-07-28 17:50 680用Javascript评估用户输入密码的强度密码已经是我们生活 ... -
15款基于浏览器扩展的WEB开发工具
2009-07-29 08:44 746WEB开发工具的使用已经 ... -
WEB 服务器调试利器 -- Tamper Data(转)
2009-07-29 08:53 726一. 简介 作为 Firefox 的插件, T ... -
图片和文字放一起,不能居中的解决方法
2009-07-29 14:47 922<td align="center" ... -
解开JavaScript生命的达芬奇密码
2009-08-05 17:56 713解开JavaScript生命的达芬奇密码 ——如何使用Jav ... -
掌控上传进度的AJAX Upload(转贴)
2009-08-05 17:59 690掌控上传进度的AJAX Uploa ... -
深入浅出URL编码
2009-08-11 19:58 613版权声明:如有转载请求,请注明出处: http://blog ... -
Javascript跨域访问解决方案
2009-08-11 20:11 621由于安全方面的考虑,Javascript被限制了跨域访问的能力 ... -
不唐突的JavaScript的七条准则(转载)
2009-08-12 13:18 611经过多年的开发、教学 ... -
浅谈Javascript中的事件流和事件绑定
2009-08-13 16:31 756事件流 浏览器中的事 ... -
JavaScript继承详解(二)
2009-08-17 17:04 597转自:http://www.cnblogs.com/sansh ... -
JavaScript继承详解(一)
2009-08-17 17:04 671转自:http://www.cnblogs.com/sansh ... -
javascript实用技巧--数组.
2009-08-17 17:08 634数组和字符串类型对象的方法我特容易搞混淆,所以把他列出来,免得 ... -
IE和Firefox之间的JavaScript差异
2009-08-17 17:18 564尽管 JavaScript 历史上使用冗长而令人生厌的代码块来 ... -
常见的JavaScript错误
2009-08-17 17:19 712作者: Richardy, 出处:IT ... -
JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度
2009-08-17 17:19 633网页可见区域宽:document.body.clientWid ... -
Javascript的Defer属性
2009-08-17 17:48 674Script中的Defer属性 ... -
最佳的"addEvent"是怎样诞生的
2009-08-18 13:47 616IE的 JScript 存在内存泄露的bug 想必大家都清楚或 ... -
值得推荐的事件捕获函数AddEvent()
2009-08-18 13:56 7421, 下面是JQuery之父推荐的添加移除事件方法。 ... -
【CSS布局.2】绝对定位和相对定位
2009-08-20 15:51 575Absolute ,CSS 中的写法是:positio ...
相关推荐
Matlab领域上传的视频均有对应的完整代码,皆可运行,亲测可用,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主或扫描视频QQ名片; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
源代码-BASISBBS最易ASP论坛 v1.0.7.zip
Matlab领域上传的视频均有对应的完整代码,皆可运行,亲测可用,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主或扫描视频QQ名片; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
华为大模型 华为2019创新大赛的工程文件+各种模型的backbone和tricks 华为2019创新大赛的工程文件+各种模型的backbone和tricks 华为2019创新大赛的工程文件+各种模型的backbone和tricks 华为2019创新大赛的工程文件+各种模型的backbone和tricks 华为2019创新大赛的工程文件+各种模型的backbone和tricks 华为2019创新大赛的工程文件+各种模型的backbone和tricks
【脑肿瘤检测】 GUI SOM脑肿瘤检测【含Matlab源码 2322期】
顾客满意度调查表.doc
Excel模板个人简历优雅简约单页30.docx
响应式web前段开发程序一书的所有源代码,PPT,课件,免费不要钱,有需要的下载即可,我是好人!给我点赞,让更多的大学生看见,大学生help大学生!
HC400-20标定版描述文件及标定版ps文件
【备注】 1.项目代码功能经验证ok,确保稳定可靠运行。欢迎下载使用!在使用过程中,如有问题或建议,请及时私信沟通。 2.主要针对各个计算机相关专业,包括计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网等领域的在校学生、专业教师或企业员工使用。 3.项目具有丰富的拓展空间,不仅可作为入门进阶,也可直接作为毕设、课程设计、大作业、初期项目立项演示等用途。 4.当然也鼓励大家基于此进行二次开发。 5.期待你能在项目中找到乐趣和灵感,也欢迎你的分享和反馈! 光伏出力、风电出力基于skleran算法实现对光伏和风电输出进行准确预测Python源码+详细注释+报告.zip 光伏出力、风电出力基于skleran算法实现对光伏和风电输出进行准确预测Python源码+详细注释+报告.zip 光伏出力、风电出力基于skleran算法实现对光伏和风电输出进行准确预测Python源码+详细注释+报告.zip 光伏出力、风电出力基于skleran算法实现对光伏和风电输出进行准确预测Python源码+详细注释+报告.zip
【交通标志识别】 GUI BP神经网络雾霾天气交通标志识别(带面板)【含Matlab源码 1771期】
Matlab领域上传的视频均有对应的完整代码,皆可运行,亲测可用,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主或扫描视频QQ名片; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
STM32F103
Spring Boot 是一个开源的 Java 框架,用于简化 Spring 应用程序的初始搭建以及开发过程。它提供了许多默认配置,使得开发者能够更快速地构建应用。以下是一些 Spring Boot 的开发案例,这些案例展示了如何使用 Spring Boot 来构建不同类型的应用程序。 Web 应用程序: 博客系统:可以使用 Spring Boot 创建一个简单的博客系统,包括用户注册、登录、发布文章、评论等功能。利用 Spring Boot 的自动配置特性,可以快速搭建起一个 Web 服务器,并通过 Spring MVC 实现 RESTful API。 在线商店:Spring Boot 可以用来构建电商网站,包括商品展示、购物车、订单处理、支付集成等功能。
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
从交易模式看游戏陪玩平台的运行逻辑(一).docx
产品属性检验记录表(注塑).xls
Matlab领域上传的视频均有对应的完整代码,皆可运行,亲测可用,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主或扫描视频QQ名片; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
项目背景: 校园二手交易网站旨在为学生提供一个便捷、安全的二手物品交易平台,促进资源循环利用,减轻学生经济负担。通过SpringBoot和Maven技术栈,构建一个高效、易维护的二手交易网站。 项目目标: 搭建一个功能齐全的二手交易平台,方便学生发布和浏览二手商品信息。 提供安全的用户认证和交易保护机制,确保交易的可靠性和安全性。 实现简洁美观的用户界面,提升用户体验。 主要功能: 用户管理:支持用户注册、登录、信息修改和账户管理。 商品发布与管理:用户可以发布、编辑、删除自己的二手商品信息,并查看其他用户发布的商品。 商品搜索与分类:支持按关键词、类别和价格范围等条件搜索商品,方便用户快速找到所需物品。 消息通知:提供买卖双方的消息通知和交流功能,促进交易沟通。 交易记录:记录用户的交易历史,方便用户查看和管理交易信息。 技术实现: 后端开发:使用SpringBoot框架构建后端服务,处理用户认证、商品管理和交易记录等功能。 前端开发:使用Thymeleaf模板引擎和Bootstrap框架开发用户界面,实现响应式设计和良好的用户体验。 数据持久化:使用MySQL数据库存储用
使用python3以上版本