事件捕获 & 事件冒泡
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body> <script>
window.onload = function() { var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3'); function fn1() {
alert( this.id );
} /*oDiv1.onclick = fn1;
oDiv2.onclick = fn1;
oDiv3.onclick = fn1;*/ //false = 冒泡（出去） true = 捕获（进来） //告诉div1，如果有一个出去的事件触发了你，你就去执行fn1这个函数
/*oDiv1.addEventListener('click', fn1, false);
oDiv2.addEventListener('click', fn1, false);
oDiv3.addEventListener('click', fn1, false);*/ //告诉div1，如果有一个进来的事件触发了你，你就去执行fn1这个函数
/*oDiv1.addEventListener('click', fn1, true);
oDiv2.addEventListener('click', fn1, true);
oDiv3.addEventListener('click', fn1, true);*/ oDiv1.addEventListener('click', function() {
alert(1);
}, false);
oDiv1.addEventListener('click', function() {
alert(3);
}, true);
oDiv3.addEventListener('click', function() {
alert(2);
}, false);
//3 2 1 }
</script>
下拉菜单--取消冒泡案例： <style>
div {
width: 200px;
height: 200px;
background-color: red;
display: none;
}
</style> <script>
window.onload = function () {
var oBtn = document.getElementsByTagName('button')[0];
var oDiv = document.getElementsByTagName('div')[0];
oBtn.onclick = function (ev) {
var oEvent = ev || event;
//取消冒泡，让事件不再往上面传递
oEvent.cancelBubble = true;
oDiv.style.display = 'block';
}
document.onclick = function () {
oDiv.style.display = 'none';
}
}
</script> <body>
<button>显示</button>
<div></div>
</body>
事件捕获 & 事件冒泡的更多相关文章
- Atitit. Js 冒泡事件阻止 事件捕获 事件传递 事件代理
Atitit. Js 冒泡事件阻止 事件捕获 事件传递 事件代理 1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 ...
- dom事件不求甚解，色解事件捕获和冒泡
以前对事件只会用jq的bind绑定一下,脑海里留着书中的事件循环,一直认为事件就是这儿循环的,最近看园子里的文章,对事件的了解更模糊了 所以我做了个小实验,总结一下看的这些零零碎碎的文章,如果总结错了 ...
- javascript事件捕获与冒泡
对“捕获”和“冒泡”这两个概念,我想我们对冒泡更熟悉一些,因为在我们使用的所有浏览器中,都支持事件冒泡,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefox,chrom ...
- js中addEventListener第三个参数涉及到的事件捕获与冒泡
js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型, ...
- js事件捕获和冒泡解析
<div id="box"> <div id="box2"> <p id="test">test< ...
- JavaScript 事件(捕获和冒泡 兼容性写法)
事件 浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的 不需要人为绑定 只需要我们去触发通过obj.事件名=function(){} 我们给元素的事件绑定了一个方法 事件名:on ...
- Spirit带你彻底了解事件捕获和冒泡机制
Dom标准事件模型 在Dom标准事件模型中,事件是先进行捕获,达到目标阶段时,在进行冒泡的 捕获阶段==>目标阶段==>冒泡阶段 目标元素和非目标元素 在介绍事件捕获和事件冒泡前 我们先要 ...
- JavaScript 详说事件机制之冒泡、捕获、传播、委托
DOM事件流(event flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段. 事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会 ...
- javascript --- 事件冒泡与事件捕获
事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题.考虑下面这段代码,就不写html->head,body之类的代码了,自行 ...
随机推荐
- python-day-10-python mysql and ORM
本节内容 数据库介绍 mysql 数据库安装使用 mysql管理 mysql 数据类型 常用mysql命令事务 创建数据库 外键 增删改查表 权限 索引 python 操作mysql ORM sq ...
- sql常识性误解
今天在公司一个项目,遇到一个问题,最后解决下来竟然发现自己对sql竟然存在一个常识性的误解 表数据 需求如下 查找 name中的数据被参数 'adsb' 包含的的列 个人原先的误区一直在于一个认识, ...
- poj2239 poj1274【二分匹配】
题意: 就是尽可能的选多的课 思路: 把课程和上课的时间看作二分图 跑一跑二分匹配就好了 #include<iostream> #include<cstdio> #includ ...
- （DP）51NOD 1006 最长公共子序列&1092 回文字符串
1006 给出两个字符串A B,求A与B的最长公共子序列(子序列不要求是连续的). 比如两个串为: abcicba abdkscab ab是两个串的子序列,abc也是,abca也是,其中abc ...
- visual studio各版本下载
软件包括以下几种: cn_visual_studio_2010_ultimate_x86_dvd_532347.part1.rar cn_visual_studio_2010_ultimate_x86 ...
- android 多线程（二）
1. 使用 AsyncTask 实现进度条 package com.test.network; import android.os.AsyncTask; import android.support. ...
- 洛谷 P2023 [AHOI2009]维护序列 || 线段树加法和乘法运算
原理倒是非常简单.设原数为x,加法的lazytag为b,乘法的lazytag为a,操作数为c,那么原式为ax+b,乘上c后(ax+b)c=(ac)*x+b*c,加上c后(ax+b)+c=ax+(b+c ...
- 总结 - 常见的JavaScript兼容性问题
添加事件的方法 (元素, 绑定的事件类型, 事件触发的方法) addHandler: function (element, type, handler) { if (element.addEventL ...
- 求n的因子个数与其因子数之和
方法一:朴素算法:O(n). #include<bits/stdc++.h> using namespace std; int get_num(int n){ ; ;i<=n;++i ...
- SPRING-BOOT系列之Spring4深入分析
上篇 : SPRING-BOOT系列之Spring4快速入门 1. 假如我们有这样一个场景,在一个组件中想获取到容器对象,那么我们也可以使用Autowired来完成装配.那么我们还可以让类集成一个接口 ...