当前位置: 首页 > 图文教程 > 网络编程 > Javascript > js 冒泡事件与事件监听使用分析

Javascript
用Javascript实现锚点(Anchor)间平滑跳转
实现png图片和png背景透明(支持多浏览器)的方法
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
用DIV完美模拟createPopup 弹出窗口(修正版),支持Firefox,ie,chrome
JavaScript 中级笔记 第一章
IE与Firefox在JavaScript上的7个不同写法小结
MooTools 1.2介绍
Mootools 1.2教程(2) DOM选择器
Mootools 1.2教程(3) 数组使用简介
在IE下获取object(ActiveX)的Param的代码
ExtJS 配置和表格控件使用
javascript 缓冲效果实现代码 推荐
html数组字符串拼接的最快方法
JavaScript 浮动定位提示效果实现代码
类似CSDN图片切换效果脚本
javascript 面向对象编程 function也是类
javascript 面向对象编程 聊聊对象的事
javascript 面向对象编程 function是方法(函数)
[原创]基于innerHTML中的script广告实现代码[广告全部放在一个js里面]
jQuery slider Content(左右控制移动)

Javascript 中的 js 冒泡事件与事件监听使用分析


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-10   浏览: 372 ::
收藏到网摘: n/a

js 冒泡事件与事件监听 代码分析 冒泡事件
js中“冒泡事件(bubble)”并不是能实际使用的花哨技巧,它是一种对js事件执行顺序的机制,“冒泡算法”在编程里是一个经典问题,冒泡算法里面的“冒泡”应该说是交换更加准确;js里面的“冒泡事件”才是真正意义上的“冒泡”,它从DOM最低层逐层遍历树,然后附加相应事件。以下面代码为例:
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

查看运行效果
事件监听
事件监听准确一点讲可以说是js引擎对用户鼠标、键盘、窗口事件等动作的监视进行的操作,也就是针对用户相应的操作进行附加事件,常用的类似 btnAdd.onclick="alert('51obj.cn')"就是一种简单的附加事件,只不过这种方法不支持附加多个事件以及删除事件。以下代 码将实现附加事件后删除事件(IE下):
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

查看运行结果
IE不能称为标准的DOM浏览器,即使是最新的IE8,相对于标准DOM如Firefox、Opera等,它是个“异类”;在Firefox中才真正有称为事件监听的函数addEventListener,如下例
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

查看运行效果
从上面两个例子看出attachEvent在Firefox中并不支持,IE也不支持addEventListener.因此需要使用兼容性的方法。
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]