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>


猜你喜欢
- 如 现有字符串 "[]aseabcd[12345]ddxabcdsx[]",要截取"abcd[" 和
- 不知道大家有没发现DWMX中有一个和FW差不多的制作弹出菜单功能?这个功能允许用文字和图片做为主菜单,如果用文字的话要先做虚拟链接。下面简单
- 前面的学习中,我们已经知道了两种python的数据类型:int和str。再强调一下对数据类型的理解,这个世界是由数据组成的,数据可能是数字(
- DataFrame对象的创建,修改,合并import pandas as pdimport numpy as np创建DataFrame对象
- 一、前言不知道大家有没有遇到过这样的问题,就是在某个软件或者某个网页里面有一篇文章,你非常喜欢,但是不能复制。或者像百度文档一样,只能复制一
- 1. datetime模块介绍1.1 datetime模块包含的类1.2 datetime模块中包含的常量2. datetime实例的方法案
- 本节内容学习帮助大家梳理神经网络训练的架构。一般我们训练神经网络有以下步骤:导入库设置训练参数的初始值导入数据集并制作数据集定义神经网络架构
- 可以通过遍历的方法:pandas按行按列遍历Dataframe的几种方式:https://www.jb51.net/article/1726
- sqoop是一款用于hadoop和关系型数据库之间数据导入导出的工具。你可以通过sqoop把数据从数据库(比如mysql,oracle)导入
- 废话不多说,直接上代码吧!import threadingimport osclass Find(threading.Thread): #搜
- 最近发现一个很有意思的画图的python库,叫做turtle,这里先说下用turtle这个库来实现用正方形画圆的思路。每次都用乌龟(turt
- mock.js简介官方链接:Mock.js (mockjs.com)前端开发人员用来模拟虚拟数据,拦截ajax请求,方便模拟后端接口安装np
- 本文实例讲述了Go语言函数基本用法。分享给大家供大家参考,具体如下:这里要说一下是Go函数和一些其他语言不一样的地方1 函数格式不同func
- 近几天闲着没事开始学了些python,看了看之前写过的代码,把写过的基础的几个程序写进博客,今天是第一个。一个可以说简单的不能再简单的小程序
- 函数内部的函数只能在函数内部调用,不能在函数外部调用,通过接下来的学习你将会知道为什么会出现这种情况。一、名称空间名称空间(name spa
- 接着上一篇,这里继续整合交易类。import datetime#交易类,后期需要整合公钥,私钥class Transaction: &nbs
- 最多16列。 create table test ( f1 int, f2 int, f3 int, f4 int, f5 int, f6
- sql server的备份与恢复(查询分析器) 查询分析器: 命令: 1:备份数据库命令: backup database whdb1(要备
- 如果你想连接你的mysql的时候发生这个错误: ERROR 1130: Host '192.168.1.3' is not
- python中一切皆为对象,所谓对象:我自己就是一个对象,我玩的电脑就是对象,坐着的椅子就是对象,家里养的小狗也是一个对象。。。。。。我们通