js中的事件捕捉模型与冒泡模型实例分析


Posted in Javascript onJanuary 10, 2015

本文实例讲述了js中的事件捕捉模型与冒泡模型。分享给大家供大家参考。

具体实现方法如下:

实例1:

<html>

<head>

<script type="text/javascript">

 window.onload = function(){

  document.getElementById('par').addEventListener('click',function() {alert('par');},true);

  document.getElementById('son').addEventListener('click',function() {alert('son');},true);

 }

</script>

<style type="text/css">

#par{width:300px;height:200px;background:gray;}

#son{width:200px;height:100px;background:green;}

</style>

</head>

<body>

<div id="par">

 <div id="son"></div>

</div>

</body>

</html>

实例2:
<html>

<head>

<script type="text/javascript">

 window.onload = function(){

  document.getElementById('par').addEventListener('click',function() {alert('par');});

  document.getElementById('son').addEventListener('click',function() {alert('son');});

 }

</script>

<style type="text/css">

#par{width:300px;height:200px;background:gray;}

#son{width:200px;height:100px;background:green;}

</style>

</head>

<body>

<div id="par">

 <div id="son"></div>

</div>

</body>

</html>

addEventListener:第三个参数为可选参数,默认情况下为false,表示冒泡模型,即先触发最小的层(id为son的div);而如果加上true参数,则说明是捕捉模型(从html-->body--->div),按这样的层次来触发。

实例1的html代码有两个div,小的div包含在大的div内,点击小的div时,先是会触发alert('par')事件;然后触发alert('son')整件。实例2正好相反。

如果是采用"对象.onclick"属性的方式来触发事件,采用的是冒泡模型。

IE不支持addEventListener,而是使用attachEvent。但attachEvent不支持第三个参数,它没有捕捉模型。

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
JS数组splice操作实例分析
Oct 12 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 Javascript
JS如何生成动态列表
Sep 22 Javascript
js中键盘事件实例简析
Jan 10 #Javascript
js中this的用法实例分析
Jan 10 #Javascript
js创建对象的方式总结
Jan 10 #Javascript
js对象继承之原型链继承实例
Jan 10 #Javascript
js对象的复制继承实例
Jan 10 #Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 #Javascript
js获取会话框prompt的返回值的方法
Jan 10 #Javascript
You might like
php读取和保存base64编码的图片内容
2017/04/22 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
javascript eval和JSON之间的联系
2009/12/31 Javascript
Extjs入门之动态加载树代码
2010/04/09 Javascript
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
Python 转义字符详细介绍
2017/03/21 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
会计自荐信范文
2014/03/09 职场文书
共产党员公开承诺书
2014/03/25 职场文书
幼儿园家长寄语
2014/04/02 职场文书
2014年教师节寄语
2014/04/03 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android