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 = ...
随机推荐
- Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds解
产生了一个解决这个问题的方法是在项目部署到tomcat比长45第二,当项目是比较大的,框架复杂的问题经常发生. 解决方法非常easy,找到以下这个路径中 workspace\.metadata\.pl ...
- Java泛型解析(03)：虚拟机运行泛型代码
Java泛型解析(03):虚拟机运行泛型代码 Java虚拟机是不存在泛型类型对象的,全部的对象都属于普通类,甚至在泛型实现的早起版本号中,可以将使用泛型的程序编译为在1.0虚拟机上可以执行的 ...
- Java-继承特性
继承的特点: 1.提高了代码的复用性. 2.让类与类之间发生了关系,有了这个关系,才有了多态的特性. (注意:千万不要为了获取其他类的功能,简化代码而继承:必须是类与类之间有所属关系才可以继承,所属关 ...
- MySQL 升级方法指南大全
原文:MySQL 升级方法指南大全 通常,从一个发布版本升级到另一个版本时,我们建议按照顺序来升级版本.例如,想要升级 MySQL 3.23 时,先升级到 MySQL 4.0,而不是直接升级到 MyS ...
- POJ 2777 Count Color（线段树+位运算）
题目链接:http://poj.org/problem?id=2777 Description Chosen Problem Solving and Program design as an opti ...
- 访问Google神器，魔高一尺，道高一丈！
最近谷歌的IP被大范围的禁用了.身处一个连谷歌都用不了的过度的程序员,深感命运多舛.幸好,魔高一尺,道高一丈.下面是几种可以使用谷歌的方法. 方法一 1)在chrome浏览器中输入:chrome:// ...
- Android摘要ImageView的scaleType属性
Android在ImageView的scaleType有8一个选项 1 matrix不正确图像放大,原来自view在左上角绘制图片(片不变形): 2 fitXY将图片所有绘制到view中,可是图片会变 ...
- 进击的Android注入术《二》
继续 在<一>里,我把基本思路描写叙述了一遍,接下为我们先从注入開始入手. 注入 分类 我们平时所说的代码注入,主要静态和动态两种方式 静态注入,针对是可运行文件,比方平时我们改动ELF, ...
- js实现tooltip动态提示效果（文字版）
页面中经常用到鼠标移动到一个元素上面显示提示的功能,最开始的做法是在下面创建一个div然后动态显示这个div,但是这样需要加很多div,比较麻烦. 针对上面个的需求,这边写了一个tooltip动态提示 ...
- css技巧--整理（1）
1.文字描边 -webkit-text-shadow:#be8ef8 2px 0 1px,#be8ef8 0 2px 1px,#be8ef8 -2px 0 1px,#be8ef8 0 -2px 1px ...