zoukankan      html  css  js  c++  java
  • 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;200px; height:50px;" readonly></textarea>
    

      代码效果如左图

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

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

    小知识点:

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

  • 相关阅读:
    c# 之 事务
    Asp.Net 之 js/jquery获取服务器端控件
    产品能力框架图
    软件测试职业发展规划图
    Loadrunner 工作原理图
    Linux内核性能测试工具全景图
    Linux 性能监控分析
    软件藏宝图
    Haproxy 8种算法+Session共享
    Keepalived+Haproxy实现高可用负载均衡
  • 原文地址:https://www.cnblogs.com/ydaimee/p/6749354.html
Copyright © 2011-2022 走看看