我们都知道DOM的事件流，有冒泡事件，如何有效的利用冒泡？

优化：应该尽量少的添加事件监听；
原理：
每添加一个事件监听事件，就会在浏览器中添加一个EventListener，如果数量过多，浏览器只能一个个遍历事件监听事件，添加监听的越多，遍历的速度越慢。
如何利用冒泡？ 如果多个子元素都要绑定相同的事件，只要在父元素上绑定一次，所有子元素即可共用。
难题：1.获得目标元素：e.target
         2.

  1.  <body>
  2.          <div id="keys">
  3.              <button>1</button>
  4.              <button>2</button>
  5.              <button>3</button>
  6.              <button>4</button><br>
  7.              <button>C</button>
  8.              <button>+</button>
  9.              <button>-</button>
  10.              <button>=</button>
  11.          </div>
  12.          <textarea id="sc" style="resize:none;width:200px; height:50px;" readonly></textarea>

代码效果如左图

若给每个button元素添加点击事件的话，不太现实，这时候可以利用冒泡的原理，给他们的父元素添加事件监听函数。

这里注意value的使用，可以读取表单元素的属性值。还有eval（）函数的用法，还是很犀利的。

小知识点：

eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

DOM的利用冒泡做的一个小程序的更多相关文章

  1. js 利用throw 写的一个小程序

    在下边的小程序中比较特殊的是使用isNaN()函数判断一个参数是不是数字, <!DOCTYPE html> <!DOCTYPE html> <html> <h ...

  2. 利用SCI做的一个足球答题系统

    SCI,异步串行通信接口,内置独立的波特率产生电路和SCI收发器,可以选择发送8或9个数据位(其中一位可以指定为奇或偶校验位). SCI是全双工异步串行通信接口,主要用于MCU与其他计算机或设备之间的 ...

  3. FMX相当于在界面上自己又做了一个小操作系统

    FMX的自画界面我也不看好,比如复制粘贴,太丑了,系统做得很好很精细的复制粘贴界面,就是无法调出,比如MIUI,复制粘贴还能有个放大镜,可以选择到屏幕边缘的文字,可以选择剪贴板内多个可粘贴的文字:还有 ...

  4. Python 练习冊，每天一个小程序

    Python 练习冊,每天一个小程序 说明:     Github 原文地址: 点击打开链接 Python 练习冊.每天一个小程序.注:将 Python 换成其它语言,大多数题目也试用 不会出现诸如「 ...

  5. 微信小程序之怎样识别一个小程序用户

    本节主要是说下怎样识别一个小程序的用户,需要用什么数据来做标识呢: 我们应该都知道判断是不是一个用户大部分都是通过userid来判断,如果这个用户访问的应用发送了一个请求,把userid之类的数据发给 ...

  6. 【Java】一个小程序，计算它包含的代码所需的耗时

    写一个小程序,用来计算它包含的代码所需的耗时.虽然简单,测试代码是否耗时还是有点用的,不用重新写嘛~ import java.util.Date; import java.util.concurren ...

  7. c++学习笔记---04---从另一个小程序接着说

    从另一个小程序接着说 文件I/O 前边我们已经给大家简单介绍和演示过C和C++在终端I/O处理上的异同点. 现在我们接着来研究文件I/O. 编程任务:编写一个文件复制程序,功能实现将一个文件复制到另一 ...

  8. c++学习笔记---03---从一个小程序说起2

    从一个小程序说起2 要求:编写一个程序,要求用户输入一串整数和任意数目的空格,这些整数必须位于同一行中,但允许出现在该行中的任何位置.当用户按下键盘上的"Enter"键时,数据输入 ...

  9. c++学习笔记---02---从一个小程序说起

    从一个小程序说起 这一讲的主要目的是帮助大家在C语言的背景知识上与C++建立联系. 问题探索 问题:对一个整型数组求和. 要求:定义一个存储着 n 个元素的数组,要求用C语言完成这个任务. 赶紧的:大 ...

随机推荐

  1. react使用swiper,解决添加点击事件首位图片点击失效，解决轮播按钮被覆盖问题

    JS部分 createSwiper1() { var option = { // slidesPerView: 5, slidesPerView: 3, centeredSlides:true, }; ...

  2. Python ：route的用法以及Http方法

    现代 Web 应用的 URL 十分优雅,易于人们辨识记忆,这一点对于那些面向使用低速网络连接移动设备访问的应用特别有用.如果可以不访问索引页,而是直接访问想要的那个页面,他们多半会笑逐颜开而再度光顾. ...

  3. NOIP2016提高A组 A题 礼物—概率状压dp

    题目描述 夏川的生日就要到了.作为夏川形式上的男朋友,季堂打算给夏川买一些生 日礼物. 商店里一共有n种礼物.夏川每得到一种礼物,就会获得相应喜悦值Wi(每种礼物的喜悦值不能重复获得). 每次,店员会 ...

  4. Python list以及numpy处理技巧

    1.numpy数组后面添加一个list: import numpy as np a=[[1,2,3],[4,5,6],[7,8,9]] box=np.array(a) box=np.vstack((b ...

  5. 09安装运行redis-trib.rb所需的环境

    运行redis-trib.rb脚本配置Redis的cluster,需要安装ruby环境,这里采用源码安装: 1:下载源码包: https://cache.ruby-lang.org/pub/ruby/ ...

  6. 在多版本python的pip的安装与对应包的安装

    最近花了好长时间在搞这个,由于Deepin下python有两个版本,并且都没有安装pip,之前的博文默认安装pip给python2.7,结果各种问题,在此将之前走过的弯路整合起来: 首先,安装pip ...

  7. 【linux配置】Redhat6.5基础配置指南

    Redhat6.5基础配置指南 本文针对鄙人在工作中常用系统配置加以说明,通常公司用于生产和测试的服务器基本上都不能连接外网,需要针对刚刚安装好的系统做一系列的常用配置. 一.常用基础系统配置 1.关 ...

  8. MySQL下载安装详情教程(Windows)

    1.下载MySQL数据库可以访问官方网站:https://www.mysql.com/ 2.点击DOWNLOADS模块下的Community模块下的MySQL Community Server进行下载 ...

  9. js控制“鼠标点击按钮后，按钮消失“（可以自己添加video标签控制播放）

  10. 安装 TortoiseSVN 时提示 please install the universal crt first

    win7x64 解决办法 去https://www.microsoft.com/zh-cn/搜索 universal crt (hotfix kb2999226)点击下图链接 也就是https://s ...