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 = ...
随机推荐
- C#将Word,Excel与Html,PDF互转
public class OfficeHelper { /// <summary> /// word转成html /// </summary> /// <param na ...
- linux_shell_获取日期相关
shell里直接调用系统变量 获取当天日期`date +%Y%m%d` 获取昨天日期`date -d yesterday +%Y%m%d` 获取前天日期`date -d -2day +%Y%m%d` ...
- C#快递跟踪（基于快递100深度定制）
本文主要介绍快递跟踪的相关信息.如根据快递单号预测所属快递公司,判断快递是否已被签收,以及改良官方model后可在不用申请授权的情况下实现json,html,xml及text等多种格式以及单行多行,降 ...
- eclipse打不开data目录解决的方法
1.首先手机必须详细root权限.没有的话,先去root. 2.root过后若还是不能打开,下载一个R.E管理器,然后将须要打开的目录设置为可读.可写.可运行. 附图:
- netty 3.9.2 UDP协议服务器和客户端DEMO
说明:基于netty 3.9.2的udp协议实现的(如果你使用的版本是4.X或5.X,请参考其他方法):程序的逻辑结构是,客户端发送给服务端一串数据,服务器端返回给客户端“A”.在进行游戏开发时需要对 ...
- 了解了解你自己的话zookeeper（从那时起，纠正了一些说法在线）
1,先看看官方的定义吧: ZooKeeper is a distributed, open-source coordination service for distributed applicatio ...
- XML的序列化与反序列化
开发时会把数据持久化成xml格式,当然可以用xmlwriter来实现,不过感觉不方便,而且很繁琐.推荐使用直接序列化.反序列化对象的方法来处理. 直接上代码: public static class ...
- Linux经常使用命令(一) - ls
ls命令是linux下最经常使用的命令.ls命令就是list的缩写, 缺省下ls用来打印出当前文件夹的清单, 假设ls指定其它文件夹, 那么就会显示指定文件夹里的文件及文件夹清单. 通过ls 命令不仅 ...
- sdut 3-4 长方形的周长和面积计算
3-4 长方形的周长和面积计算 Time Limit: 1000MS Memory limit: 65536K 标题叙述性说明 通过本题的练习能够掌握拷贝构造函数的定义和用法: 设计一个长方形类Rec ...
- Hadoop-2.4.1完全分布式环境搭建
Hadoop-2.4.1完全分布式环境搭建 Hadoop-2.4.1完全分布式环境搭建 一.配置步骤如下: 主机环境搭建,这里是使用了5台虚拟机,在ubuntu 13系统上进行搭建hadoop ...