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 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
那些年,我还在学习jquery 学习笔记
Mar 05 Javascript
appendChild() 或 insertBefore()使用与区别介绍
Oct 11 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
Bootstrap基本样式学习笔记之表格(2)
Dec 07 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
详解Angular结合zTree异步加载节点数据
Jan 20 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
vue实现简单的日历效果
Sep 24 Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 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 数组入门教程小结
2009/05/20 PHP
PHP CURL使用详解
2019/03/21 PHP
一些javascript一些题目的解析
2010/12/25 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
在Layui中实现开关按钮的效果实例
2019/09/29 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
特步官方商城:Xtep
2017/03/21 全球购物
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
史学专业毕业生求职信
2014/05/09 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
模范教师材料大全
2014/12/16 职场文书
阿凡达观后感
2015/06/10 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
用python批量解压带密码的压缩包
2021/05/31 Python
PHP实现两种排课方式
2021/06/26 PHP
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python