js 冒泡事件与事件监听使用分析
更新时间：2009年09月21日 19:50:32 作者：
js 冒泡事件与事件监听 代码分析
冒泡事件
js中“冒泡事件(bubble)”并不是能实际使用的花哨技巧，它是一种对js事件执行顺序的机制，“冒泡算法”在编程里是一个经典问题，冒泡算法里面的“冒泡”应该说是交换更加准确；js里面的“冒泡事件”才是真正意义上的“冒泡”，它从DOM最低层逐层遍历树，然后附加相应事件。以下面代码为例：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
查看运行效果
事件监听
事件监听准确一点讲可以说是js引擎对用户鼠标、键盘、窗口事件等动作的监视进行的操作，也就是针对用户相应的操作进行附加事件，常用的类似 btnAdd.onclick="alert('51obj.cn')"就是一种简单的附加事件，只不过这种方法不支持附加多个事件以及删除事件。以下代 码将实现附加事件后删除事件（IE下）：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
查看运行结果
IE不能称为标准的DOM浏览器，即使是最新的IE8，相对于标准DOM如Firefox、Opera等，它是个“异类”；在Firefox中才真正有称为事件监听的函数addEventListener，如下例
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
查看运行效果
从上面两个例子看出attachEvent在Firefox中并不支持，IE也不支持addEventListener.因此需要使用兼容性的方法。
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
js中“冒泡事件(bubble)”并不是能实际使用的花哨技巧，它是一种对js事件执行顺序的机制，“冒泡算法”在编程里是一个经典问题，冒泡算法里面的“冒泡”应该说是交换更加准确；js里面的“冒泡事件”才是真正意义上的“冒泡”，它从DOM最低层逐层遍历树，然后附加相应事件。以下面代码为例：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
查看运行效果
事件监听
事件监听准确一点讲可以说是js引擎对用户鼠标、键盘、窗口事件等动作的监视进行的操作，也就是针对用户相应的操作进行附加事件，常用的类似 btnAdd.onclick="alert('51obj.cn')"就是一种简单的附加事件，只不过这种方法不支持附加多个事件以及删除事件。以下代 码将实现附加事件后删除事件（IE下）：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
查看运行结果
IE不能称为标准的DOM浏览器，即使是最新的IE8，相对于标准DOM如Firefox、Opera等，它是个“异类”；在Firefox中才真正有称为事件监听的函数addEventListener，如下例
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
查看运行效果
从上面两个例子看出attachEvent在Firefox中并不支持，IE也不支持addEventListener.因此需要使用兼容性的方法。
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
相关文章
在开发中可能有遇到过屏幕录制的需求,无论是教学、演示还是游戏录制,都需要通过屏幕录制来记录和分享内容,MediaRecorder 是一种强大的技术,可以在浏览器端实现屏幕录制功能,本文将介绍如何使用JS MediaRecorder 实现屏幕录制,需要的朋友可以参考下2023-11-11
静态网页加密...2006-11-11
这篇文章主要给大家介绍了关于如何利用原生js实现表单的正则验证，所有验证都通过后提交按钮才可用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要介绍了prettier自动格式化去换行的实现代码，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-08-08
实现思路为：密码小于六位的时候，密码强度图片都为灰色;密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度等等，感兴趣的朋友可以参考下哈2013-04-04
这篇文章主要为大家详细介绍了JavaScript中函数的四种调用方式,文中的示例代码讲解详细,对我们深入掌握JavaScript有一定的帮助,需要的可以参考下2023-10-10
本文以京东搜索框为例给大家浅析search 搜索框的写法，本文介绍的非常不错，需要的朋友可以参考下2016-08-08
JavaScript onclick与addEventListener使用的区别介绍
addEventListener()方法用于向指定元素添加事件句柄，使用 removeEventListener()方法来移除，onclick和addEventListener事件区别是：onclick事件会被覆盖，而addEventListener可以先后运行不会被覆盖，addEventListener可以监听多个事件2022-09-09
javascript 正则替换 replace(regExp, function)用法
刚在弄网页通过servlet返回的json数据来添加div元素,简单研究了下replace(regExp, function)方式的function参数.2010-05-05
这篇文章主要为大家详细介绍了原生js实现弹幕效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
最新评论