DOM事件机制(原理级别的)
时间:2022-07-28
本文章向大家介绍DOM事件机制(原理级别的),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
div {
width: 100%;
padding: 100px;
box-sizing: border-box;
}
.one {
background: thistle;
}
.two {
background: mistyrose;
}
.three {
background: coral;
}
</style>
</head>
<body>
<div class="one">
<div class="two">
<div class="three"></div><!--核心:层层padding: 100px;叠加的.宽高皆是.-->
</div>
</div>
<script type="text/javascript">
let divs = document.querySelectorAll('div');
let one = document.querySelector('.one');
let two = document.querySelector('.two');
let three = document.querySelector('.three');
divs.forEach(div=>div.addEventListener("click",logText,
{
once:true,//最多重复三次,写了这个代表点击几次相同的区域都是没有重复的.
capture:false//意思是:true的话·代表从第一个div开始进入里面最里面three.false的意思是从里面执行到最外面的one
}));
function logText(e) {
console.log(this.classList.value);
// e.stopPropagation();
e.stopPropagation();//代表只会执行一次
}
</script>
</body>
</html>
我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=1dv4z80fihmgs
- 『教程』微信小程序webview的使用
- How to Save an ARIMA Time Series Forecasting Model in Python (如何在Python中保存ARIMA时间序列预测模型)
- Decision Trees in Apache Spark (Apache Spark中的决策树)
- Feature Selection For Machine Learning in Python (Python机器学习中的特征选择)
- 简约的JAVA版本MapReduce和日常No.25
- 根据职位说明使用机器学习来检索相关简历
- 微信小游戏初体验
- 一行Spark代码的诞生记(深度剖析Spark架构)
- Ray:AI的分布式系统
- Spring Boot 中使用 MongoDB 增删改查
- 来人啊给我炸了那个Java虚拟机No.46
- 机器学习虾扯淡之Logistic回归No.44
- 大数据计数原理1+0=1这你都不会算(一)No.47
- 机器学习虾扯蛋之SVD奇异值分解No.48
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 在MacOSX机器上设置JenkinsCI服务器
- springboot2配置文件定义${user.name}内容失效问题探究
- 重学Javascript之数据类型
- JPEG/Exif/TIFF格式解读(1):JEPG图片压缩与存储原理分析
- 聊聊dubbo-go的ProviderAuthFilter
- 仅需四步,写一个springboot starter
- 重学Javascript之类型转换
- Spring Cloud 微服务(九)- 集成 Spring Boot Admin
- 聊聊dubbo-go的RPCInvocation
- 程序员是怎么记住一堆密码的?
- 腾讯大牛教你MySQL 8.0 PFS histogram解析与优化
- Python __init__.py 作用详解
- Python创建包,导入包
- Python查看模块(变量、函数、类)方法
- Python __doc__属性:查看文档