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 = ...
随机推荐
- jQuery本身方法（$.each,$.map,$.contains,$ajax）
常用工具方法 (1)$.trim $.trim方法用于移除字符串头部和尾部多余的空格. $.trim(' Hello ') // Hello (2)$.contains $.contains方法返回一 ...
- BZOJ 3209 花神的数论题 数位DP+数论
题目大意:令Sum(i)为i在二进制下1的个数 求∏(1<=i<=n)Sum(i) 一道非常easy的数位DP 首先我们打表打出组合数 然后利用数位DP统计出二进制下1的个数为x的数的数量 ...
- utf8 和 UTF-8 在使用中的差别
在使用中经常遇到utf-8和utf8,如今最终弄明确他们的使用不同之处了,如今来和大家分享一下,以下我们看一下utf8 和 UTF-8 有什么差别 "UTF-8"是标准写法,ph ...
- HDU 3639 Hawk-and-Chicken（Tarjan缩点+反向DFS)
Problem Description Kids in kindergarten enjoy playing a game called Hawk-and-Chicken. But there alw ...
- 脱O把妹，记录这一周来迁移至MySQL的一些心得
· 背景 公司要把一些老设备退服,一些陪伴我多年的DB要下线了,舍不得.正好借此机会,手贱把自己3个"回收站"DB迁移到MySQL上,也算是赶一把时髦.等真正看着这些老设备下线了的 ...
- Google maps API开发
原文:Google maps API开发 Google maps API开发(一) 最近做一个小东西用到google map,突击了一下,收获不小,把自己学习的一些小例子记录下来吧 一.加载Googl ...
- 使用C/C++发展Web系统开源
下载 见 C++开发的论坛系统 - BBS 下载地址:Fetch_source_code_release_vse2008_v1.2.1.7z 眼下先暂存在百度云上,最近会放入github 当前版本号的 ...
- 第3章3节《MonkeyRunner源码剖析》脚本编写示例: MonkeyImage API使用示例(原创)
天地会珠海分舵注:本来这一系列是准备出一本书的,详情请见早前博文“寻求合作伙伴编写<深入理解 MonkeyRunner>书籍“.但因为诸多原因,没有如愿.所以这里把草稿分享出来,所以错误在 ...
- 【Java&Android开源库代码分析】のandroid-async-http の开盘
在<[Java&Android开源库代码剖析]のandroid-smart-image-view>一文中我们提到了android-async-http这个开源库,本文正 ...
- 从.net复制源代码中国农历阵列，必要做日历
从.net复制源代码中国农历阵列,必要做日历 const { 闰月的月份.春节的阳历日期(农历正月初一).农历的每一个月天数 } c_arrLunarInfo: array [1900 .. 2100 ...