js事件冒泡机制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件冒泡</title>
<style>
.big{
width: 500px;
height: 500px;
border: 1px solid red;
}
.two{
width: 300px;
height: 300px;
border: 1px solid green;
}
.three{
width: 100px;
height: 100px;
border: 1px solid yellow;
}
</style>
</head>
<body>
<div class="big">
<div class="two">
<div class="three"></div>
</div>
</div>
<script>
let big = document.getElementsByClassName('big')[0]
let two = document.getElementsByClassName('two')[0]
let three = document.getElementsByClassName('three')[0]
big.onclick = function () {
alert('big')
}
two.onclick = function () {
alert('two')
}
three.onclick = function (e) {
// 不阻止冒泡 会依次弹出 three two big
e.stopPropagation() // 事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转
// return false; // 事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转 直接就不执行事件直接跳出了
// event.preventDefault(); // 事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）
alert('three')
}
</script>
</body>
</html>
js事件冒泡机制的更多相关文章
- 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了
哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...
- JS事件冒泡机制和兼容性添加事件
本篇文章主要来讲讲 事件的冒泡机制 和 添加事件的几种方法. 一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段 捕获阶段是指从父层往子层找.比如 <body> ...
- 浅谈js的事件冒泡机制
很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...
- js的事件冒泡机制
js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document这个根节点这里.js的事件冒泡机制,就像是一个水泡在水底下,冒泡到水面的过程. 摘自醉清玄
- 解析Javascript事件冒泡机制
本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...
- JavaScript中的事件冒泡机制
事件冒泡机制 事件冒泡发生的条件:当为多个嵌套的元素设置了相同的事件处理程序,它们将触发事件冒泡机制.在事件冒泡中,最内部的元素将首先触发其事件,然后是栈内的下一个元素触发该事件,以此类推,直到到达最 ...
- 什么是JS事件冒泡？
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...
- js事件冒泡和事件委托
js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix" data-type=&q ...
- 什么是JS事件冒泡
什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个 ...
随机推荐
- [Swift]LeetCode402. 移掉K位数字 | Remove K Digits
Given a non-negative integer num represented as a string, remove k digits from the number so that th ...
- Typescript 查缺补漏
Types Casting: let input = xxx as HTMLInputElement; let input = <HTMLElement>xxxx; Object Shap ...
- 如何优雅的利用Windows服务来部署ASP.NET Core程序
上一篇文章中我给大家讲述了五种部署ASP.NET Core网站的方法,其中有一种方式是通过Windows服务来进行部署,这样既可以做到开启自启动,又不会因为iis的反向代理而损失部分性能.但是美中不足 ...
- 使用ML.NET和Azure Function进行机器学习 - 第1部分
介绍 一提到机器学习,总是让人望而生畏.幸运的是,Azure正在想方设法让开发人员更容易进入机器学习.ML.NET是Microsoft Research专为.NET开发人员开发的机器学习框架,因此您可 ...
- PHP_D4_“简易聊天室 ”的具体技术实现
上面已经介绍了系统的关键技术,下面对具体实现进行详解: 1.开发时,经常需要利用一个配置文件来存储系统的参数,例如:数据库连接信息等.这样可以提高系统的可移植性,当系统的配置发生变化时,例如:更改服务 ...
- Android Native App自动化测试实战讲解（下）（基于python）
6.Appuim自动化测试框架API讲解与案例实践(三) 如图1,可以在主函数里通过TestSuite来指定执行某一个测试用例: 6.1,scroll():如图2 从图3中可以看到当前页面的所有元素r ...
- [Python Web]部署完网站需要做的基本后续工作
简述 今天自己上线了一个简单的 Page,没有什么功能就是一个展示页. 但是,我发现部署完,上线后,还要弄不少东西.下面就是我记录.整理的一些上线网站基本都会用到的网站和配置. 加入统计代码 这个是必 ...
- 带着萌新看springboot源码8（spring ioc源码下）
继续接着上一节,到了第六步(温馨提醒,内容有点小多,不过看完ioc原理就差不多了) 6.注册Bean后置处理器(registerBeanPostProcessors(beanFactory)) 最后一 ...
- Educational Codeforces Round 48 (Rated for Div. 2)——A. Death Note ##
A. Death Note time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...
- hdu：2030.汉字统计
Problem Description 统计给定文本文件中汉字的个数. Input 输入文件首先包含一个整数n,表示测试实例的个数,然后是n段文本. Output 对于每一段文本,输出其中的汉 ...