利用事件冒泡实现简单的网页计算器

效果:

代码:

<!DOCTYPE HTML>
<html>
    <head>
        <title>取消与利用冒泡</title>
        <meta charset="utf-8"/>
    </head>
    <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>
    <script>
      var sc=
        document.getElementById("sc");
            document.getElementById("keys")
                .addEventListener("click",
                function(e){
          if(e.target.nodeName=="BUTTON"){
            switch(e.target.innerHTML){
              case "C":
                sc.value="";
                break;
              case "=":
                sc.value=eval(sc.value);
                break;
              default:
                sc.value+=
                  e.target.innerHTML;
            }
          }

                }
            );
        </script>
    </body>
</html>

时间： 2024-10-20 02:33:49

利用事件冒泡实现简单的网页计算器的相关文章

事件委托（利用事件冒泡）

1,事件委托原理:给父节点添加侦听器,利用事件冒泡影响每一个字节点点击任意一个li,都能弹出警示框,:给ul 绑定事件,点击任意一个li 时,li不注册事件,而是向上冒泡委托给ul 响应事件,那么ul 下面的每一个li 都会执行事件处理程序 ul.addEventListener('click',function(event){ alert("1"); event.target.style.backgroundColor="red"; }) 2, 这是事件冒泡的好

事件冒泡的一些应用_利用事件冒泡处理多个事件[1]

在做项目时,有这样一个需求,需要点击Input显示隐藏下拉面板,从中选择内容填充入文本框. 最开始思路: (1)文本框与下拉面板作为一个整体,整体失去焦点后,隐藏下拉面板,不可行: (2)文本框正拥有焦点,此时点击面板,尝试先触发面板的点击事件再通过文本框的失去焦点事件以上思路最终均不可行,原因: (1)div没有获取焦点之说,何来失去焦点: (2)文本框触发焦点事件总是会先执行,面板隐藏后无法再触发其点击事件: 最后解决思路:利用冒泡机制,将点击事件绑定在父容器中,如果有点击事件,判断tar

理解事件冒泡

一.什么是事件冒泡事件是用于触发js代码的某种状态或行为,是html实现与js交互的桥梁.事件必须被安装在某个对象上,比如浏览器或文档中的元素,否则事件就无法存在.设想如果不把click()或mousemove()这样的事件绑定到某个对象(事件目标event target)上,那么无论鼠标怎么点怎么滑,网页都不会有任何反应.于是问题来了,当某个事件发生的时候,浏览器如何判断这个事件发生在谁身上呢?比如点击son区域,那究竟是点的son,还是Dad,还是Grandpa?由于html中存在大量嵌套

原生js阻止事件冒泡代码实例

原生js阻止事件冒泡代码实例:关于什么是事件冒泡这里就不多介绍了,可以参阅javascript事件冒泡简单介绍一章节,任何现象都是双刃剑,有时候利用事件冒泡能够带来便利性,但是有时候也会带来不便,下面就通过带来实例介绍一下如何阻止事件冒泡现象.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" conte

事件流：事件冒泡和事件捕获

事件流:事件冒泡和事件捕获 1. 两者概念事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件., element.addEventListener(event,function(),false); 事件冒泡是自下而上的去触发事件.绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获. element.addEventListener(event,function(),true); 从上面可知,第三个参数为true或者false; true,事件捕获: fals

js事件流之事件冒泡的应用----事件委托

什么是事件委托? 它还有一个名字叫事件代理. JavaScript高级程序设计上讲: 事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 用取快递来解释这个现象,大家认真领会一下事件委托到底是一个什么原理: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚

理解js事件冒泡事件委托事件捕获

js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <div id="col"> <p> <a id="btn" href="#">button</a> </p></div> <script> let b

事件冒泡机制和事件委派以及回调的匿名函数参数

1.事件冒泡机制: 事件冒泡机制也就是当一个事件绑定到一个元素上时,如果这个元素不存在或者回调函数返回ture,那么这个事件就会向上冒泡,继续绑定这个元素的父级元素直至document.(如果事件返回return false则不会冒泡) 阻止冒泡:1.事件return false ; 2.evt.stopPropagation(这个evt指此次事件,写在事件匿名回调函数的参数里)例如: $('li').click(function(evt){evt.stopPropagation()}); 2.

JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE

转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html ● 事件分为三个阶段: 事件捕获 --> 事件目标 --> 事件冒泡 ● 事件捕获:事件发生时(onclick,onmouseover--)首先发生在document上,然后依次传递给body.……最后到达目的节点(即事件目标). ● 事件冒泡:事件到达事件目标之后不会结束,会逐层向上冒泡,直至document对象,跟事件捕获相反 1.onlick -->事件冒泡,