js事件委托和事件代理案例分享
作者：diasa 发布时间：2024-04-28 09:51:31
标签：js,事件委托,事件代理
什么是事件委托/事件代理
利用事件的冒泡传播机制（触发当前元素的某一个行为，它父级所有元素的相关行为都会被触发），如果一个容器中有很多元素都要绑定点击事件，我们没有必要一个个的绑定了，只需要给最外层容器绑定一个点击事件即可，在这个方法执行的时候，通过事件源的区分来进行不同的操作。
具体小案例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
font-size:14px;
}
html,body{
width:100％;
height:100％;
overflow:hidden;
}
#box{
position:absolute;
left:50％;
top:50px;
width:100px;
height:30px;
margin-left:-50px;
line-height:30px;
text-align:center;
border:1px solid #2489cc;
}
#mark{
position:absolute;
top:30px;
left:-1px;
width:300px;
height:100px;
line-height:100px;
text-align:center;
background:#ffe470;
border:1px solid #2489cc;
}
</style>
</head>
<body>
<div id='box'>
<span>购物车</span>
<div id="mark" style='display:none'>
查看购物车的详细信息
</div>
</div>
<script>
var mark = document.getElementById('mark');
document.body.onclick = function(e){
e = e || window.event;
e.target = e.target || e.srcElement;
//如果点击的是box或者是#box下的span，我们判断mark是否显示，显示让其隐藏，反之让其显示
if(e.target.id==="box" || (e.target.tagName.toLowerCase()==="span" && e.target.parentNode.id==='box')){
if(mark.style.display === "none"){
mark.style.display === "block"
}else{
mark.style.display === "none"
}
return;
}
//如果事件源是#mark，不进行任何的操作
if(e.target.id==="mark"){
return;
}
mark.style.display === "none"
}
</script>
</body>
</html>
0
投稿猜你喜欢
在Linux下安装Oracle数据库是一件较为麻烦的事情。由于Linux的安装过程中可能会选择不同的安装包，会导致Oracle安装过程中缺失- 介绍An open source load testing tool.一个开源性能测试工具。define user behaviour wi
- 在命令行中运行python代码是很常见的，下面介绍如何定义命令后面跟的参数。1 常规用法Python代码中主要使用下面
- 1. 将图片存入数据库关于数据库基本操作的学习，请参见这一篇文章：https://www.jb51.net/article/167141.h
- 如果一个模型里包含了ManyToManyField，在admin后台可能会显示成object，例如解决方法：在定义这个类的时候，加多一个函数
- 先说下自己的环境，redis是部署在centos上的，爬虫运行在windows上，1. 安装redisyum install -y redi
- 本文实例讲述了Python实现截屏的函数。分享给大家供大家参考。具体如下：１.可指定保存目录.２.截屏图片名字以时间为文件名３.截屏图片存为
- netcdf是气候数据中的主流格式，当涉及到大范围的全球数万个格网点数据时，使用python脚本可以较快地读取与处理。import netC
- 1.文本string：通用字符串操作re：正则表达式操作difflib：差异计算工具textwrap：文本填充unicodedata：Uni
- MySQL-Group-Replication 是mysql-5.7.17版本开发出来的新特性；它在master-slave 之间实现了强一
- 今天我升级MYSQL到5.1的时候遇到的。写出来共享以下。1、[root@localhost mysql]# scripts/mysql_i
- 前言网上关于PyCharm快捷键的文章数不胜数，但是我发现有以下几个缺陷：具体基于哪个配置? 因为Windows / Mac 的配置各不同，
- 本文为大家分享了python数据分析数据标准化及离散化的具体内容，供大家参考，具体内容如下标准化1、离差标准化是对原始数据的线性变换，使结果
- NetworkX是一个非常强大的网络科学工具，它封装了图的数据结构和许多经典图算法，也内置了许多可视化函数可供调用。1. 随机图生成最经典的
- 本文实例讲述了Python使用MYSQLDB实现从数据库中导出XML文件的方法。分享给大家供大家参考。具体分析如下：这里需要给前端以xml格
- 摘要：MySQL JDBC抽取到底应该采用什么样的方式，且听小编给你娓娓道来。小编最近在云上的一个迁移项目中被MySQL抽取模式折磨的很惨。
- 本文实例讲述了Python实现对字符串的加密解密方法。分享给大家供大家参考，具体如下：需求是是要将密码存在数据库里，所以要加密解密是可逆的，
- 何为自省在计算机编程领域里，自省是一种能力，是通过一定机制在程序运行时获知对象的类型及对象的内部结构，Python的自省能力还是很强大的，因
- 什么是闭包?简单说,闭包就是根据不同的配置信息得到不同的结果。再来看看专业的解释:闭包（Closure）是词法闭包（Lexical Clos
- pytorch显存越来越多的一个原因optimizer.zero_grad()loss.backward()optimizer.step()
