javascript面向对象的类方法添加点击事件```html```要找图片的序号，就先定义一个序号，依次自增要找图片的

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box img {
        width: 80px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
  <script>
    // 第一步要操作什么或者在什么里面操作，就先找到什么，或者先定义好
    // 用到了面向对象的方法，也就是先定义一个函数，这个函数里面把要用到的东西的壳子放进去，
    // 一直按照这种方式，只要要用到，就先放个壳子，往后再增加
    // 在下面在把要用到的东西补充完整
    // 增加的方式就是【.prototype】
    // 找到作为容器的dom元素
    // 所有内容在这里面操作
    var box = document.querySelector("div.box");
    // 构造函数
    // 首先定义一个函数，这个函数是一个对象
    var TrafficLight = function () {
      // 里面的属性有颜色
      this.color = 1; /*改变的是文件夹里图片的序号， */

      //   要生成的DOM元素，默认为空,在下面写
      this.dom = null;
      //   初始化，这里是一个方法，在下面一个函数里，定义好这个方法
      this.init();
    };

    // 初始化是一个方法，把这个方法用prototyptype添加到函数里面去
    TrafficLight.prototype.init = function () {
      // 这个方法里面的属性
      this.dom = document.createElement("img");
      // 上面已经定义了this.color = 1
      this.dom.src = "./img/" + this.color + ".jpg";
      //   把生成的img孤儿节点绑定到box里面去，要操作
      box.appendChild(this.dom);
      //   绑定一个事件
      this.bindEvent();/* 用this方法打点直接执行，在下面定义 */
    };

    // 绑定事件干的事如下
    // 这个方法用了会执行改变颜色方法
    TrafficLight.prototype.bindEvent = function () {
      var that = this;
      this.dom.onclick = function () {
        that.changeColor();
      };
    };

    // 改变颜色如下
    TrafficLight.prototype.changeColor = function () {
      this.color++;
      if (this.color == 4) {
        // 改变颜色，其实也就是this.color自增
        // 要找图片的序号，就先定义一个序号，依次自增
        this.color = 1;
      }
      this.dom.src = "./img/" + this.color + ".jpg";
    };
    // 实例化100个对象
    for (var i = 0; i < 100; i++) {
      // i每一次自增，就多一个对象
      new TrafficLight();
    }
  </script>
</html>