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

Posted 撒哈拉的雪

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用事件冒泡实现简单的网页计算器相关的知识，希望对你有一定的参考价值。

 

 效果:

代码:

 

<!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>

 

以上是关于利用事件冒泡实现简单的网页计算器的主要内容，如果未能解决你的问题，请参考以下文章

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

怎么用java代码模拟网页点击事件？

事件委托

带有 Webview 的片段利用硬件后退按钮转到上一个网页

事件捕获与事件冒泡

JavaScript / JQuery事件委托如何实现？