-
js 事件流理解 && 阻止事件冒泡和默认行为
第一：事件流：在页面接受事件的顺序。分两个阶段 1事件捕获阶段 2目标阶段 3事件冒泡阶段
1事件捕获阶段：是从上而下查找如 document->html->body->div
2目标阶段
3事件冒泡阶段：是从下而上找（与上相反）
addEventListenter有三个参数（事件，回调函数，boolean[false:冒泡--默认，true:捕获]）
父元素
子元素
事件捕获情况：
点击子元素div情况下：
let child = document.querySelector('.child')
child.addEventListener('click',function(){
alert('我是子元素')
},true)//true捕获 从上而下 事件先打印父元素在打印子元素。
let parent = document.querySelector('.parent')
parent.addEventListener('click',function(){
alert('我是父元素')
},true)
事件冒泡情况
点击子元素div情况下：
let child = document.querySelector('.child')
child.addEventListener('click',function(){
alert('我是子元素')
},false)//false捕获 从下而上 事件都先打印子元素在打印父元素。
let parent = document.querySelector('.parent')
parent.addEventListener('click',function(){
alert('我是父元素')
},false)
第二：阻止事件冒泡和默认行为
div class="parent">
父元素
子元素
1 阻止默认行为如下：
var aa = document.querySelector('a')
aa.addEventListener('click',function(e){
//1 种
e.preventDefault();
//2 种 兼容性问题 老版本ie
// e.returnValue = false;
//3 种
//return false;
})
2 阻止事件冒泡
let child = document.querySelector('.child')
child.addEventListener('click',function(e){
alert('我是子元素')
e.stopPropagation() //主要这句话
//e.cancelBubble = true //兼容性老版本ie 取消冒泡
},false)//冒泡行为默认是false 可以不写 false
let parent = document.querySelector('.parent')
parent.addEventListener('click',function(){
alert('我是父元素')
},false)
kubernetes二进制安装教程单master
ai智能语音机器人是如何影响客户体验的?电销机器人部署
R语言dplyr包group_by函数和summarise_at函数计算dataframe计算不同分组的计数个数和均值、使用%＞%符号将多个函数串起来
想调整视频的色彩平衡就这样操作
单调栈 I：leetcode 739、402、316、321
php单独使用laravel数据库
(一)esp32开发环境搭建（VSCode+IDF实现单步调试）
Spring Boot 实现万能文件在线预览-开源学习一
基于SSM的汽车养护管理系统