• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

    我们都知道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 代码。

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
在附近小程序中展示你的小程序-微信小程序开发-****21发布时间:2022-07-18
下一篇:
小程序视频播放组件video发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap