1.事件流
浏览器开发团队遇到一个很有意思问题：页面的那一部分会拥有特定的事件？
对于理解这个问题您可以想象画在一张纸上的一组同心圆，如果你把手指放在圆心上，那么你的手指指向的其实不是一个圆，而是纸上所有的圆。放到实际页面中就是，你点击一个按钮，而是纸上所有的圆。
<栗子：现实生活中的声波、水波>
事件流：从页面中接收事件的顺序，通俗说：用户操作DOM的一系列行为交互.
2.事件冒泡
事件冒泡：IE的事件流叫事件冒泡，即事件开始由最具体的元素（文档中嵌套层次最深的那个元素）接收，然后逐级向上传播到较为不具体的元素（html）
栗子：点击页面中的button元素，那么这个事件会按照如下顺序传播<Chrome浏览器>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Bubbling Example</title>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementById('button');
oBtn.onclick = function() {
console.log('1. You click button');
};
document.body.onclick = function() {
console.log('2. You click body');
};
document.onclick = function() {
console.log('3. You click document');
};
window.onclick = function() {
console.log('4. You click window');
};
}
</script>
</head>
<body>
<div id="box">
<input type="button" value="Click Me" id="button" />
</div>
</body>
</html>
3.事件捕获
a.事件捕获：即事件开始由最不具体的元素接收，然后逐级向下传播到为最具体的目标元素
为了模拟实现事件捕获得了解一下addEventListener
b.addEventListener 为文档节点、document、window 或 XMLHttpRequest 注册事件处理程序
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Bubbling Example</title>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementById('button');
oBtn.addEventListener('click', function(){
console.log('1. You click button');
},true);
document.body.addEventListener('click', function(){
console.log('2. You click body');
},true);
document.addEventListener('click', function(){
console.log('3. You click document');
},true);
window.addEventListener('click', function(){
console.log('4. You click window');
},true);
}
</script>
</head>
<body>
<div id="box">
<input type="button" value="Click Me" id="button" />
</div>
</body>
</html>
综上所述：事件捕获、事件目标、事件冒泡如下图所示：
事件流之事件冒泡与事件捕获<JavaScript高级程序设计>学习笔记的更多相关文章
-
JavaScript高级程序设计学习笔记之事件
1.事件流 事件流描述的是从页面中接收事件的顺序. 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播 ...
-
JavaScript高级程序设计学习笔记第十三章--事件
事件冒泡: IE 的事件流,事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档).例如: <!DOCTYPE html> <htm ...
-
JavaScript高级程序设计学习笔记--事件
HTML事件处理程序 <input type="button" value="Click Me" onclick"showMessage()&q ...
-
Javascript高级编程学习笔记（57）—— 事件（1）事件流
事件 JS与HTML的交互是通过事件实现的 而事件指的就是:文档或浏览器窗口特定的交互瞬间 可以通过侦听器来预定事件,以便在事件发生时执行相应的代码 这种模式也是设计模式中的观察者模式 事件流 有了事 ...
-
JS高级程序设计学习笔记之JS事件（1）
事件流 冒泡 定义:事件开始时由最具体的元素接收,然后逐级上传到较为不具体的节点.(IE9.FF.Chrome.Safari会将事件一直冒泡到window对象.IE5.5及其以下会跳过<html ...
-
《JavaScript高级程序设计》笔记：事件（十三）
事件流 事件冒泡 IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档).如下代码: <body> <div id="myDi ...
-
Javascript高级编程学习笔记（59）—— 事件（3）事件对象
事件对象 在触发DOM‘事件时,会产生一个事件对象 event 该对象包含着所有与事件有关的信息 所有浏览器都支持 event 对象但是支持的方式有所不同 DOM事件对象 兼容DOM的浏览器会将eve ...
-
Javascript高级编程学习笔记（58）—— 事件（2）事件处理程序
事件处理程序 事件处理程序即响应某个事件的函数 事件处理程序以 “on” 开头 如“onclick”,“onload” HTML事件处理程序 某个元素支持的每种事件都可以使用一个与响应的事件处理程序同 ...
-
Javascript高级编程学习笔记（66）—— 事件（10）变动事件
变动事件 DOM2级的变动事件,能在DOM中的一部分发生变化时给出提示 变动事件是为XML或HTML DOM 设计的,并不特定于某种语言 DOM2级定义了如下变动事件: DOMSubtreeModif ...
随机推荐
-
Java.web-application-development-environments-for-macosx
Java Web Application开发 1 下载需要的软件 使用的软件并没有采用最新的版本,只是采用了次新版本. 1.1 下载Eclipse的jee版本 eclipse-jee-luna-SR2 ...
-
如何查询MySql日志
如何查询MySql日志 分类: mysql2012-02-23 19:14 26756人阅读 评论(2) 收藏 举报 mysqlcommandprintingserversocketoutput 今天 ...
-
js定时器window.setTimeout和setInterval
window.setTimeout(function(){ document.getElementById("editorindex&q ...
-
windows 挂载windows 共享盘为本地磁盘
我们在设置数据库自动备份时,为了数据的安全往往需要直接将数据备份到远程服务器上.在Linux可以通过NFS挂载来实现,在Windows平台可以直接通过net use+subst来实现将远程服务器的目录 ...
-
ubuntu ssh重启
SSH分客户端openssh-client和openssh-server 如果你只是想登陆别的机器的SSH只需要安装openssh-client(ubuntu有默认安装,如果没有则sudo apt-g ...
-
windows和linux下关闭Tomcat进程
windows和linux下解决Tomcat进程 windows下启动Tomcat报错,8080端口号被占用,报错信息如下 两种解决方法,一种是关闭了这个端口号,另外一种是修改Tomcat下的serv ...
-
愚蠢的遗留BUG
二次开发本来就是很恶心的事,我竟然是三次开发. 今天遇到一个BUG,上传图片的时候报错了,操作过程很简答,点击上传按钮,选择图片,确定上传,如图: 报错信息很直白,也很奇怪: (为了写博客,把代码回滚 ...
-
Android 初了解
1.1G-4G 1G 大哥大 语音通话 2G 小灵通 采用GSM,美国的一个军方标准,后来被民用了. 可以发短信了,上网的网址不是www,是wap.baidu.com 3G 可以上网了,直接用ww ...
-
selenium-01 搭建环境
很老套,但是不得不做的事. selenium的发展史,具体的虫师大大已经写得很具体了:http://www.cnblogs.com/fnng/p/3653793.html 1.第一种使用的姿势就是ID ...
-
小米Note 2简单卡刷开发版启用root超级权限的步骤
小米的机器不同手机型号一般MIUI官方论坛都提供两个不同版本,分别为稳定版和开发版,稳定版没有提供Root超级权限管理,开发版中就开启了Root超级权限,较多时候我们需要使用的一些功能强大的软件,都需 ...