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 相关文章推荐
JSON扫盲帖 JSON.as类教程
Feb 16 Javascript
2010年最佳jQuery插件整理
Dec 06 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
浅谈js原生拖放
Nov 21 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
微信小程序实现上传图片功能
May 28 Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 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实现框架(二)
2006/10/09 PHP
php explode函数实例代码
2012/02/27 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
javascript取消文本选定的实现代码
2010/11/14 Javascript
初识JQuery 实例一(first)
2011/03/16 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
Vue父组件监听子组件生命周期
2020/09/03 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
5个很好的Python面试题问题答案及分析
2018/01/19 Python
python 统计一个列表当中的每一个元素出现了多少次的方法
2018/11/14 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
python 提取文件指定列的方法示例
2019/08/07 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
django queryset相加和筛选教程
2020/05/18 Python
python变量的作用域是什么
2020/05/26 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
详解nginx location指令
2022/01/18 Servers