事件委托之实现简单的计算器

最新推荐文章于 2022-11-15 01:29:05 发布
流灬
最新推荐文章于 2022-11-15 01:29:05 发布
阅读量723
点赞数
分类专栏：笔记文章标签： javascript
本文链接：https://blog.youkuaiyun.com/qq_41625074/article/details/105356307
版权
笔记专栏收录该内容
9 篇文章
订阅专栏
事件委托：原理就是事件有冒泡机制，当子元素触发事件后，事件会往外传给父元素。此时事件可以添加给只添加父元素，然后统一处理子元素的需求或者还可以分开处理。
通过下面的例子来了解事件委托:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        border-collapse: collapse;
      }
      td {
        border: 1px solid #000000;
        text-align: center;
        vertical-align: center;
        width: 50px;
        height: 50px;
      }
      .result {
        text-align: right;
      }
    </style>
  </head>
  <body>
    <table class="table1">
      <tr>
        <td colspan="4" class="result"></td>
      </tr>
      <tr>
        <td class="num">1</td>
        <td class="num">2</td>
        <td class="num">3</td>
        <td class="num">+</td>
      </tr>
      <tr>
        <td class="num">4</td>
        <td class="num">5</td>
        <td class="num">6</td>
        <td class="num">-</td>
      </tr>
      <tr>
        <td class="num">7</td>
        <td class="num">8</td>
        <td class="num">9</td>
        <td class="num">*</td>
      </tr>
      <tr>
        <td class="clear">C</td>
        <td class="num">0</td>
        <td class="Sum">=</td>
        <td class="num">/</td>
      </tr>
    </table>
    <script>

        /* 思路：利用事件的冒泡机制，应用事件委托，将所有可点击的单元格的事件全都委托到表格元素上。
           各个元素之间的联系靠this（表格元素），也就是通过相当于是以表格元素为根节点的模型来建立
           关系。e.target(被点击的元素)，通过e.target.childNodes[0].nodeValue获得所点击的元素的
           值。
           因为计算器是点击后会立即显示出所点击的值，所以放结果的那个单元格是需要单独获取的，无论是
           通过模型的关系去获得还是直接通过dom操作去找到，都一样。其他只需要点击的元素可以不获取元素
           ，因为这些个元素在逻辑上没有什么关系，需要获得所点击的元素的值通过e.target.childNodes[0]
           .nodeValue就可以了
           这里搞清楚逻辑关系，把这些符号分成三类+一个结果框
           一类符号是数字加运算符
           一类是等号
           一类是归零
           运算的本质还是对字符串进行处理，这里的字符串只有数字加运算符。每次点击，只要是一点到第一类字符
           ，那么就调用getSTR函数把这个字符和之前结果框里的文本累加起来，然后创建以这个字符串为内容的文本
           节点，接着把结果框内所有的元素清空后从尾部插入。返回后的值用于转化成表达式
           字符串拼接结束的两个条件，一是遇到归零，二是遇到等号
           当点击的字符是归零时，清空结果框内的元素，并且使字符串为空
           当点击的字符是等号时，调用getFuHao函数进行对应的运算。这里主要是通过在字符串中用indexOf判断
           各种符号以及所在位置，然后以运算符为分割标志分割字符串，接着把数组元素转化成数字，是啥运算就咋进行
        */
        // 调用初始函数
      init();
        // 定义初始函数
        /* 
        通过dom操作获取表格元素，并给它添加一个事件侦听，在这里也即把它所有子元素的事件侦听都委托给它了
        */
      function init() {
        var table = document.querySelector("table");
        table.addEventListener("click", getElement);
      }
        // 定义回调函数
        /* 
        this指向表格元素，通过模型关系找到结果框
        创建一个文本节点，然后插入结果框中
        用变量str2来获取最新的结果框中文本字符串，为拼接下一个字符做准备
        如果点击的是结果框，则结束，不拼接字符
        如果点击的是归零，则清空结果框内的元素，并且使字符串为空
        当点击的字符是数字或运算符时，调用getSTR函数进行拼接下一个字符，返回拼好的字符串
        当点击的字符是等号时，调用getFuHao函数进行对应的运算
        */
      function getElement(e) {
        var result = this.children[0].children[0].children[0];
        var Text = document.createTextNode("");
        result.appendChild(Text);
        var str2 = result.firstChild.nodeValue;
        if(e.target===result){
          return;
        }else if (e.target.childNodes[0].nodeValue === "C") {
          result.innerHTML = null;
          str2 = "";
        } else if (e.target.childNodes[0].nodeValue !== "=") {
          str2=getSTR(str2, result, e.target.childNodes[0].nodeValue);
        } else if (e.target.childNodes[0].nodeValue === "=") {
          getFuHao(str2, result);
        }
      }
      /* 
      定义getSTR函数，进行拼接下一个字符，返回拼好的字符串
      str2是最新的结果框中文本字符串
      result是结果框元素
      value是点击的字符
      拼完以后创建一个文本节点
      先把之前的所有元素删除
      然后把新建的文本节点插入结果框中
      */
      function getSTR(str2, result, value) {
        str2 += value;
        var text = document.createTextNode(str2);
        result.innerHTML = null;
        result.appendChild(text);
        return str2;
      }
      /* 
      定义getFuHao函数，进行对应的运算
      str2是最新的结果框中文本字符串
      result是结果框元素
      这里主要是通过在字符串中用indexOf判断各种符号以及所在位置，然后以运算符为分割标志分割字符串，
      接着把数组元素转化成数字，是啥运算就咋进行
      算完以后创建一个以结果为内容的文本节点
      先把之前的所有元素删除
      然后把新建的文本节点插入结果框中
      */
      function getFuHao(str2, result){
        if (str2.indexOf("+") > -1) {
            str2 = str2.split("+");
            var text1 = document.createTextNode(Number(str2[0]) + Number(str2[1]));
            result.innerHTML = null;
            result.appendChild(text1);
          } else if (str2.indexOf("-") > -1) {
            str2 = str2.split("-");
            var text1 = document.createTextNode(Number(str2[0]) - Number(str2[1]));
            result.innerHTML = null;
            result.appendChild(text1);
          } else if (str2.indexOf("*") > -1) {
            str2 = str2.split("*");
            var text1 = document.createTextNode(Number(str2[0]) * Number(str2[1]));
            result.innerHTML = null;
            result.appendChild(text1);
          } else if (str2.indexOf("/") > -1) {
            str2 = str2.split("/");
            var text1 = document.createTextNode(Number(str2[0]) / Number(str2[1]));
            result.innerHTML = null;
            result.appendChild(text1);
          }
      }
    </script>
  </body>
</html>