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 代码。

转载于:https://www.cnblogs.com/ydaimee/p/6749354.html

DOM的利用冒泡做的一个小程序相关推荐

拼插机器人课和围棋课_我做了一个小程序，里面有各种乐高拼搭图纸和案例
等产品发出去后,我们陆续收到好多用户的好评. 其中有一位老师的评价最让我感动: 对这样的建议,我举双手双脚欢迎.以前我的课程,比如编程课,就有家长自发组织起来,组织了一帮孩子一起学习,父母在旁边帮忙指 ...
自己做的一个小程序可采集、导出、模板、配置
去年老婆要开个店铺,卖化妆品的,不过输入数据的时候真的头疼,因为我们是没有货源的,都是从代理那里找图片.介绍等,不过好在代理有个网站,闲来无事,就开发了这个小程序. 程序的功能: 1.采集数据 2.可 ...
到圣诞节了，不得不庆祝一下，用C++ Beep函数做了一个小程序
目录 Beep做的圣诞歌正文开始 DWORD dwFreq DWORD dwturation 需要注意的地方 Beep做的圣诞歌 #include <bits/stdc++.h> #in ...
python换脸完整程序_小 200 行 Python 代码做了一个换脸程序
原标题:小 200 行 Python 代码做了一个换脸程序简介在这篇文章中我将介绍如何写一个简短(200行)的 Python 脚本,来自动地将一幅图片的脸替换为另一幅图片的脸. 这个过程分四步: ...
小程序制作预算_做一个小程序的大概预算是多少？做一个小程序大概多少钱？...
做一个小程序的大概预算是多少?做一个小程序大概多少钱?下面跟随小编一起来看看吧! 小程序开发需要多少钱,这个要看你做什么样的小程序, 你对小程序的功能.框架.定位.交互.UI的要求是什么? 这些都需要 ...
七夕给女朋友做的一个小礼物
今天正值七夕佳节,想着给女朋友表白,就做了一个小demo,很简单很简单,界面只显示一颗爱心,但是简短的代码里有着我自己想表达的情意 let nowadays, future, dueTime,some ...
突发灵感，看到某网站的搞笑图片挺多，做了一个小java，扫描抠了一些
2019独角兽企业重金招聘Python工程师标准>>> 突发灵感,看到某网站的搞笑图片挺多,做了一个小java,扫描抠了一些这里分享一下 /*** 取得文件的后缀名* @Descr ...
为什么一个程序申请的内存有限制_为什么要做自己的小程序商城，做一个要多久？...
原创:轻栈为什么要做自己的小程序商城? 已经习惯了用排名说话,这是最新小程序活跃度的日榜: 正值618,日活最多的小程序,还是拼多多和京东购物.看看周榜和上个月榜单,这两个平台就算不是全平台搞活动, ...
黑白块游戏java代码_用ｊａｖａ做的一个小游戏—黑白反斗棋（适合菜鸟）
用Java做的一个小游戏,黑白反斗棋,我玩过了5*5和10*10的.是学习之后做的,不是自己原始开发的. import java.awt.Color; import java.awt.FlowLayo ...
新手怎么做一个小程序？
小程序的诞生,让各行业从独立出发APP进入微信.小程序有多受欢迎?从有人称之为互联网的下一个风口就可以看出.微信小程序从使用至今仍处于不断发展的环节.很难说小程序是否是下一个风口,但小程序等不需要下载 ...

DOM的利用冒泡做的一个小程序

DOM的利用冒泡做的一个小程序相关推荐

最新文章

热门文章