Event事件冒泡和事件捕获
<!doctype html>
<html lang="en">
<head>
<meta charset="gb2312">
<style>
#top{
width:400px;
height:400px;
background:red;
}
#middle{
width:300px;
height:300px;
background:blue;
}
#bottom{
width:200px;
height:200px;
background:yellow;
}
</style>
<script>
window.onload = function(){
var oTop = document.getElementById('top');
var oMiddle = document.getElementById('middle');
var oBottom = document.getElementById('bottom');
oTop.addEventListener('click',function(){
console.log('top1');
},false);
oMiddle.addEventListener('click',function(){
console.log('middle1');
},false);
oBottom.addEventListener('click',function(){
console.log('bottom1');
},false);
oTop.addEventListener('click',function(){
console.log('top2');
},true);
oMiddle.addEventListener('click',function(){
console.log('middle2');
},true);
oBottom.addEventListener('click',function(){
console.log('bottom2');
},true);
}
</script>
<title>event</title>
</head>
<body>
<div id='top'>
<div id='middle'>
<div id='bottom'></div>
</div>
</div>
</body>
</html>
Event事件冒泡和事件捕获的更多相关文章
- js高级：event，事件冒泡，事件捕获
1.事件 浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发. 通过 obj.事件名=function(){} 事件名:onmouseover 鼠标悬 ...
- javascript中的事件冒泡、事件捕获和事件执行顺序
谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...
- javascript --- 事件冒泡与事件捕获
事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题.考虑下面这段代码,就不写html->head,body之类的代码了,自行 ...
- JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获
先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...
- JS事件（事件冒泡和事件捕获）
事件流:描述的是在页面中接收事件的顺序 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用 ...
- JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE
转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html ● 事件分为三个阶段: 事件捕获 --> 事件目标 --> ...
- js 事件冒泡和事件捕获
事件流:指的是网页中元素接受事件的顺序,它是一个概念,而不是具体的实际的东西 事件冒泡:指的是内层元素的事件,会触发包含着此元素的外层元素的事件,触发的顺序是:由内而外的 例如: <!DOCTY ...
- 彻底弄懂JS的事件冒泡和事件捕获
先上结论:在事件执行流中有两种执行方式.一种是事件冒泡(即事件的执行顺序是从下往上执行的) ; 另一种是捕获(即事件的执行顺序是从上往下执行的); 阻止事件冒泡: return false; ...
- 【JavaScript】事件捕获、事件冒泡与事件委托
2018年12月18日 最近在学习js时,遇到了三个名词:事件捕获.事件冒泡.事件委托. 一.事件捕获和事件冒泡 事件捕获和事件冒泡是为了解决网页中的事件流(事件发生的顺序)而提出的概念. 事件捕获是 ...
- 【转载】浅谈事件冒泡与事件捕获 - javascript 事件代理
原文:https://segmentfault.com/a/1190000000749838 事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发 ...
随机推荐
- Simple2D-21（重构）渲染部分
以前 Simple2D 的渲染方法是先设置 Pass,然后添加顶点数据,相同 Pass 的顶点数据会合并在一起.当设置新的 Pass 时,将旧的 Pass 和对应的顶点数据添加到渲染数组中.最后在帧结 ...
- iphone splash screen
https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articl ...
- ICE中间件相关
Ice 是 网络通信引擎 Internet Communications Engine 的简称,是ZeroC开发的一个面向对象的中间件平台.它提供了面向对象的远程过程调用.网格计算和发布/订阅功能,并 ...
- tair介绍以及配置
简介 tair 是淘宝自己开发的一个分布式 key/value 存储引擎. tair 分为持久化和非持久化两种使用方式. 非持久化的 tair 可以看成是一个分布式缓存. 持久化的 tair 将数据存 ...
- 迷你MVVM框架 avalonjs 1.4.1发布
以后有关avalon的版本升级消息,全部改放到这里 重构parseHTML,让其支持xhtml 强化 ms-duplex-number拦截器 添加data-duplex-number辅助指令 值为st ...
- go递归函数如何传递数组切片slice
数组切片slice这个东西看起来很美好,真正用起来会发现有诸多的不爽. 第一,数组.数组切片混淆不清,使用方式完全一样,有时候一些特性又完全不一样,搞不清原理很容易误使用. 第二,数组切片的appen ...
- scala 基本语法
1.对于一个二元数组,键值对(k,v) 用map的时候,要取第一个或者第二个元素,用 _1 或者 _2表示. scala> words.take(2)res40: Array[(String, ...
- 疯狂JAVA——第六章 面向对象（下）
6.1包装类 java为了照顾程序员的传统习惯,所以提供了八种基本数据类型.但也带来不方便,例如所有引用类型都继承自Object类,都可当做Object类型变量使用.但基本数据类型的变量就不可以.如果 ...
- OpenOffice Word文档转换成Html格式
为什么会想起来将上传的word文档转换成html格式呢?设想,如果一个系统需要发布在页面的文章都是来自word文档,一般会执行下面的流程:使用word打开文档,Ctrl+A,进入发布文章页面,Ctrl ...
- jsp页面添加时间
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <body& ...