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 = ...
随机推荐
- Android两个注意事项.深入了解Intent和IntentFilter(两)
深入理解Intent和IntentFiler(二) 转载请表明出处:http://blog.csdn.net/u012637501(嵌入式_小J的天空) 在上一篇文章中,我们比較具体学习了&q ...
- c++使用stmp协议发送电子邮件(163邮箱，TTL非SSL)
0.有关TLS和SSL SSL/TLS是用来加密邮件流的. 假设不加密的话非常easy被人破解. 只是既然是要发送广告邮件,这个就不用在意了,使用没加密的即可. 另外在使用的时候,发现,qq的邮箱须要 ...
- Openstack & Hadoop结合项目Sahara
Openstack 项目Sahara,主要是用来搭建Hadoop集群,利用虚拟出来的计算资源,高速搭建Hadoop集群. Sahara项目与OPenstack其它项目的关系: 图片转自:http:// ...
- 【百度地图API】如何批量转换为百度经纬度
原文:[百度地图API]如何批量转换为百度经纬度 摘要: 百度地图API的官网上提供了常用坐标转换的示例.但是,一次只能转换一个,真的非常麻烦!!这里结合了官方的示例,自制一个批量转换工具,供大家参考 ...
- 【百度地图API】当地址解析失败时，如何调用search方法查找地址
原文:[百度地图API]当地址解析失败时,如何调用search方法查找地址 有个朋友问我,当地址解析失败时,应该如何处理呢?比如,他想搜索“南宁市青秀区”. --------------------- ...
- asp.net webform生命周期
- MVC验证12-使用DataAnnotationsExtensions对整型、邮件、最小值、文件类型、Url地址等验证
原文:MVC验证12-使用DataAnnotationsExtensions对整型.邮件.最小值.文件类型.Url地址等验证 本文体验来自http://dataannotationsextension ...
- server正式的环境性能测试nginx-php 指着寻求突破的表现
因为我是第三级城市语言.无法接触到更牛接触逼公司或环境.这是你母亲的现场环境摸过几次.截至完毕,测试已设法提高空间. 公司须要的站点执行环境.不能由于我这边的瓶颈而阻碍了公司进行,希望各位大能能不吝惜 ...
- 快速构建Windows 8风格应用17-布局控件
原文:快速构建Windows 8风格应用17-布局控件 本篇博文主要介绍三种常用的布局控件:Canvas.Grid.StackPanel. Panel类是开发Windows 8 Store应用中一个重 ...
- GIMP也疯狂之动态图的制作（三）
Note:本篇文章内容为linux下利用gimp和其它工具组合完成截取制作GIF图的一种实现,制作更为灵活,但并不方便,如果不需要那么高的定制性,并追求方便高效.可以使用类似QQ影音之类的软件,自带截 ...