DOM的利用冒泡做的一个小程序
我们都知道DOM的事件流,有冒泡事件,如何有效的利用冒泡?
优化:应该尽量少的添加事件监听;
原理:
每添加一个事件监听事件,就会在浏览器中添加一个EventListener,如果数量过多,浏览器只能一个个遍历事件监听事件,添加监听的越多,遍历的速度越慢。
如何利用冒泡? 如果多个子元素都要绑定相同的事件,只要在父元素上绑定一次,所有子元素即可共用。
难题:1.获得目标元素:e.target
2.
<body>
<div id="keys">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button><br>
<button>C</button>
<button>+</button>
<button>-</button>
<button>=</button>
</div>
<textarea id="sc" style="resize:none;width:200px; height:50px;" readonly></textarea>
代码效果如左图
若给每个button元素添加点击事件的话,不太现实,这时候可以利用冒泡的原理,给他们的父元素添加事件监听函数。
这里注意value的使用,可以读取表单元素的属性值。还有eval()函数的用法,还是很犀利的。
小知识点:
eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
DOM的利用冒泡做的一个小程序的更多相关文章
- js 利用throw 写的一个小程序
在下边的小程序中比较特殊的是使用isNaN()函数判断一个参数是不是数字, <!DOCTYPE html> <!DOCTYPE html> <html> <h ...
- 利用SCI做的一个足球答题系统
SCI,异步串行通信接口,内置独立的波特率产生电路和SCI收发器,可以选择发送8或9个数据位(其中一位可以指定为奇或偶校验位). SCI是全双工异步串行通信接口,主要用于MCU与其他计算机或设备之间的 ...
- FMX相当于在界面上自己又做了一个小操作系统
FMX的自画界面我也不看好,比如复制粘贴,太丑了,系统做得很好很精细的复制粘贴界面,就是无法调出,比如MIUI,复制粘贴还能有个放大镜,可以选择到屏幕边缘的文字,可以选择剪贴板内多个可粘贴的文字:还有 ...
- Python 练习冊,每天一个小程序
Python 练习冊,每天一个小程序 说明: Github 原文地址: 点击打开链接 Python 练习冊.每天一个小程序.注:将 Python 换成其它语言,大多数题目也试用 不会出现诸如「 ...
- 微信小程序之怎样识别一个小程序用户
本节主要是说下怎样识别一个小程序的用户,需要用什么数据来做标识呢: 我们应该都知道判断是不是一个用户大部分都是通过userid来判断,如果这个用户访问的应用发送了一个请求,把userid之类的数据发给 ...
- 【Java】一个小程序,计算它包含的代码所需的耗时
写一个小程序,用来计算它包含的代码所需的耗时.虽然简单,测试代码是否耗时还是有点用的,不用重新写嘛~ import java.util.Date; import java.util.concurren ...
- c++学习笔记---04---从另一个小程序接着说
从另一个小程序接着说 文件I/O 前边我们已经给大家简单介绍和演示过C和C++在终端I/O处理上的异同点. 现在我们接着来研究文件I/O. 编程任务:编写一个文件复制程序,功能实现将一个文件复制到另一 ...
- c++学习笔记---03---从一个小程序说起2
从一个小程序说起2 要求:编写一个程序,要求用户输入一串整数和任意数目的空格,这些整数必须位于同一行中,但允许出现在该行中的任何位置.当用户按下键盘上的"Enter"键时,数据输入 ...
- c++学习笔记---02---从一个小程序说起
从一个小程序说起 这一讲的主要目的是帮助大家在C语言的背景知识上与C++建立联系. 问题探索 问题:对一个整型数组求和. 要求:定义一个存储着 n 个元素的数组,要求用C语言完成这个任务. 赶紧的:大 ...
随机推荐
- 如何通过EditPlus远程连接Linux
1. File - FTP - FTP Settings 2. Add 3. 填写Linux的ip地址及用户名和密码 4. OK
- 使用DynamoShake从dynamodb迁移到mongodb
去年和今年年初,我们开源了MongoShake和RedisShake分别用于MongoDB和Redis的迁移.同步.备份等多种需求.最近,我们的shake系列又进一步壮大,我们推出了一款dynamod ...
- error: stray ‘\357’ in program——输入了中文的标点符号
/home/qian/Pioneer/src/network/src/WiFi_connect.cpp::: error: stray ‘\’ in program sockfd = socket(A ...
- win 7下安装mysql zip格式
mysql 下载地址:https://dev.mysql.com/downloads/mysql/5.5.html#downloads 下载的mysql格式为zip: 下载完成放在除C盘以外的盘. 一 ...
- ArcGIS中线转面
1. 打开ArcMap用Add Data加载shp Polyline线文件. 2. 选Editor编辑\Start Editing开始编辑. 3. 选Editor编辑\More Editing Too ...
- MySql存储过程批量给多个数据库中的同名表添加字段
1 创建存储过程 batchAddField:给所有"MyDB_"开头的数据库添加新字段 -- ---------------------------- -- Procedure ...
- 【DM642学习笔记四】flash烧写过程——错误记录…
(欢迎批评指正) 一,打开.cdd配置文件时出错: 解决:在FlashBurn配置窗口中,Conversion Cmd一栏可不用管: 菜单Program—Download FBTC,load ...
- spring boot 源码解析11-ConfigurationClassPostProcessor类加载解析
前言 ConfigurationClassPostProcessor实现了BeanDefinitionRegistryPostProcessor接口,该类会在AbstractApplicationCo ...
- 统一建模语言简介UML
统一建模语言(Unified Modeling Language,UML)是用来设计软件蓝图的可视化建模语言,1997 年被国际对象管理组织(OMG)采纳为面向对象的建模语言的国际标准.它的特点是简单 ...
- 9.2专项测试-Android性能测试黑盒分析-1
1. 专项测试 业务测试:面向新需求 回归测试:面向已交付需求 专项测试:面向非功能需求的各类质量唯独特征 表现 用户维度 技术维度 崩溃 crash,弱网 检测崩溃1.某个页面,因为研发处理不合适, ...