js 冒泡 捕获
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div>
<a id="p" onclick="alert('父级 onclick')" style="display:block;background-color:red;width:400px;height:200px">一刀一个
<span id="el" onclick="alert('子级 onclick')" style="display:block;background-color:green;width:300px;height:150px">一枪一个
<div id="dl" onclick="alert('孙级 onclick')" style="display:block;background-color:gray;width:200px;height:100px">
<div id="sl" onclick="alert('曾孙级 onclick')" style="display:block;background-color:orange;width:120px;height:100px"></div>
</div>
</span>
</a>
</div>
<script type="text/javascript">
var el = document.getElementById('el');
var p = document.getElementById('p');
var d = document.getElementById('dl');
var z = document.getElementById('sl');
p.addEventListener('click', function () {
alert('父级 冒泡');
}, false); p.addEventListener('click', function () {
alert('父级 捕获');
}, true);
el.addEventListener('click', function () {
alert('子级 捕获');
}, true);
el.addEventListener('click', function () {
alert('子级 冒泡');
}, false);
d.addEventListener('click', function () {
alert('孙级 捕获');
}, true);
d.addEventListener('click', function () {
alert('孙级 冒泡');
}, false);
z.addEventListener('click', function () {
alert('曾孙级 冒泡');
}, false);
z.addEventListener('click', function () {
alert('曾孙级 捕获');
}, true); </script>
</body>
</html>
js 冒泡 捕获的更多相关文章
- Atitit. Js 冒泡事件阻止 事件捕获 事件传递 事件代理
Atitit. Js 冒泡事件阻止 事件捕获 事件传递 事件代理 1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 ...
- JS冒泡事件 与 事件捕获
JS冒泡事件 与 事件捕获 案例 <!DOCTYPE html> <html> <head> <title>冒泡事件</title> < ...
- Js 冒泡事件阻止
Js 冒泡事件阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...
- js冒泡法和数组转换成字符串示例代码
将数组转换成字符串的方法有很多,讲解下js冒泡法的使用.js代码: //js冒泡法与数据转换为字符串的例子 //整理:www.jbxue.com window.onload = function(){ ...
- Js冒泡事件详解及阻止
Js冒泡机制是指如果某元素定义了事件A,如click事件,如果触发了事件之后,没有阻止冒泡事件,那么事件将向父级元素传播,触发父类的click函数. 如下例所示: <html> & ...
- 浅谈js冒泡事件2
js冒泡阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览器实现 . ...
- 项目开发中的一些注意事项以及技巧总结 基于Repository模式设计项目架构—你可以参考的项目架构设计 Asp.Net Core中使用RSA加密 EF Core中的多对多映射如何实现？ asp.net core下的如何给网站做安全设置 获取服务端https证书 Js异常捕获
项目开发中的一些注意事项以及技巧总结 1.jquery采用ajax向后端请求时,MVC框架并不能返回View的数据,也就是一般我们使用View().PartialView()等,只能返回json以 ...
- js脚本捕获页面 GET 方式请求的参数？其实直接使用 window.location.search 获得
js脚本捕获页面 GET 方式请求的参数?其实直接使用 window.location.search 获得
- js冒泡，阻止冒泡
js 冒泡事件 阻止冒泡 window.onload = function () { var oDiv1 = document.getElementById('div1'); var oDiv2 = ...
随机推荐
- ACM之跳骚---ShinePans
Description Z城市居住着非常多仅仅跳蚤.在Z城市周六生活频道有一个娱乐节目.一仅仅跳蚤将被请上一个高空钢丝的正中央.钢丝非常长,能够看作是无限长.节目主持人会给该跳蚤发一张卡片.卡片上写有 ...
- 【百度地图API】如何区分地址解析和智能搜索？
原文:[百度地图API]如何区分地址解析和智能搜索? 摘要: 很多用户一直无法区分地址解析geocoder和智能搜索localsearch的使用场景.该文章用一个详尽的示例,充分展示了这两个类,共5种 ...
- Apache & WebDav 配置（二）
(二)WebDav配置 & put脚本编辑! WebDav 配置 ---------------- # 1. 修改了两个配置文件 # 2. 创建web访问用户的用户名和口令 # 3. 创建了两 ...
- Windows Phone 8.1 多媒体（1）：相片
原文:Windows Phone 8.1 多媒体(1):相片 Windows Phone 8.1 多媒体(1):相片 Windows Phone 8.1 多媒体(2):视频 Windows Phone ...
- 省钱加油(Fuel Economy)题解
题目 农夫约翰决定去做一个环游国家旅行,为了不让他的奶牛们感到孤单,于是他决定租一辆货车带领他的奶牛们一起去旅行.这辆货车的油箱最多可以承载G 个单位的油,同时为了简化问题,规定每一个单位的油可以行使 ...
- hdoj 4324 Triangle LOVE 【拓扑】
Triangle LOVE Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) To ...
- 【iOS】Xib的使用与File'Owner总结
一.XIB的适用范围 xib(也叫Nib)与storyboard一样是用来描写叙述界面的. storyboard描写叙述的是比較大型的,大范围.适合描写叙述界面跳转等. 二.XIB的使用 Xib是小范 ...
- SQL点滴21—几个有点偏的语句
原文:SQL点滴21-几个有点偏的语句 SQL语句是一种集合操作,就是批量操作,它的速度要比其他的语言快,所以在设计的时候很多的逻辑都会放在sql语句或者存储过程中来实现,这个是一种设计思想.但是今天 ...
- 图文详解ReSharper 8.1功能变化
ReSharper 8.1版本已经发布有段时间了,被广大开发者购买和试用,今天小编就ReSharper 8.1功能变化就行详细的解说. 支持TypeScript 突出了重构(重命名,引入变量).导航. ...
- C/C++中常量字符串管理
为了节省内存,C/C++把常量字符串放到单独的一个内存区域.当几个指针赋值给相同的常量字符串时,它们实际上会指向相同的内存地址.但用产量初始化字符数组,结果却不同. 下面是一个小程序示例: #incl ...