事件冒泡与事件捕获，附实例

事件冒泡，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
事件捕获，即不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。
由于老版本的浏览器不支持事件捕获，因此很少有人用。建议大家放心使用事件冒泡，在有特殊需要时再使用事件捕获。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body><div id="myDiv1" style="background: #00ad36;height: 300px;width: 300px;position: relative;"><div id="myDiv2" style="background: #00a0e9;height: 100px;width: 100px;left: 50%;top:50%;position: absolute;margin-left: -50px;margin-top: -50px;text-align: center;line-height: 100px;">Click</div></div><script type="text/javascript">$('#myDiv1').click(function () {console.log('点击了外部的DIV');});$('#myDiv2').click(function () {console.log('点击了内部的DIV');});</script>
</body>
</html>

转载于:https://www.cnblogs.com/xutongbao/p/9924988.html

事件冒泡与事件捕获，附实例相关推荐

javascript中的事件冒泡、事件捕获和事件执行顺序
谈起JavaScript的事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...
JavaScript事件冒泡、事件捕获和阻止默认事件
谈起JavaScript的事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. 冒泡篇先来看一段实例: js: var $input = document. ...
[JS] 事件冒泡，阻止事件冒泡，事件的三个阶段（捕获，目标，冒泡）
事件冒泡添加三个套在一起的div元素,在最里面放一个button,感受事件触发时从里到外"冒泡"的过程. 给每个div都加一个事件:点击时就alert test.html < ...
JS 事件冒泡和事件捕获
原文:https://www.cnblogs.com/qq9694526/p/5653728.html JS 事件冒泡和事件捕获本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jq ...
addeventlistener事件第三个参数_简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序...
这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在htm ...
JS高级：事件冒泡和事件捕获；
1.事件:浏览器客户端上客户触发的行为成为时事件:所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发当用户触发一个事件时,浏览器的所有详细信息都存在一个叫做event的对象上,我们把它叫做 ...
“约见”面试官系列之常见面试题第三十四篇之事件冒泡、事件捕获、事件代理（建议收藏）
对于事件的传播机制,Netscape Communicator采用的是事件捕获(event capture),IE9.Safari.Chrome.Opera和Firefox采用的是事件冒泡(event ...
JavaScript学习（二十八）—事件冒泡和事件捕获
JavaScript学习(二十八)-事件冒泡和事件捕获一.什么是事件流? 简单说,事件流就是指事件的执行顺序,他包含两种模式:事件冒泡.事件捕获. (一).事件冒泡最常用的一种模式,就是指事件的执 ...
事件冒泡 vs 事件捕获 vs 事件委托的区别
事件冒泡 vs 事件捕获 vs 事件委托本主要用于理解这JS的这三种事件的专业术语所表述的意义: 在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览 ...
彻底弄懂JS的事件冒泡和事件捕获
原文地址为: 彻底弄懂JS的事件冒泡和事件捕获在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获.当时的我,把它当成IE浏览器兼容问题 ...

事件冒泡与事件捕获，附实例

事件冒泡与事件捕获，附实例相关推荐

最新文章

热门文章