Question

我试图创建一个简单的函数，当我的一个lis发生点击时会增加一个计数器。当我运行它时，我收到错误 addEventListener不是函数。

HTML：

  <ul class="boxes">
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
    <li class="box"></li>
  </ul>

JS：

     var squares = document.getElementsByClassName('box');

   function MyCounter(el){
            this.turn = 0;

              this.addClick = function() {
                this.turn ++;
                console.log(this.turn);
            };

              el.addEventListener('click', this.addClick(), false);
       }
    var c = new MyCounter(squares);

有什么建议吗？

Answer 1

getElementsByClassName返回一个类似数组的元素，而不是单个元素。

应该是：

var squares = document.getElementsByClassName('box')[index];

对于每个类元素循环：

document.querySelectorAll('.box').forEach((e) => {
  ...
  e.addEventListener(...)
});

Answer 2

＆＃13;

    function MyCounter(els){
      this.turn = 0;
    
      this.addClick = function() {
        this.turn++;
        console.log(this.turn);
      };
    
      // old code:
      //el.addEventListener('click', this.addClick(), false);
      // 1. parameter el is a collection of DOM elements, not a single element
      // 2. this.addClick() - calls addClick, resulting in undefined to be passed to addEventListener
      // 3. context inside addClick (if its reference is passed to addEventListener) would be DOM element, not instance of MyCounter
      for (var i = 0; i < els.length; i++) {
        els[i].addEventListener('click', this.addClick.bind(this), false);
      }
    }
    
    var squares = document.getElementsByClassName('box');
    var c = new MyCounter(squares);

＆＃13;

div.box
{
  display:block;
  width:100px;
  height:100px;
  margin-right:10px;
  margin-bottom:10px;
  background: green;
}

＆＃13;

<div class="box">A</div>
<div class="box">B</div>

＆＃13;

Answer 3

问题是您正在尝试将事件侦听器添加到元素列表中。相反，你需要循环它们并将监听器应用于每一个：

function MyCounter(links) {
    var turn = 0;

    function addClick = function() {
        turn ++;
        console.log(turn);
    };

    for (var i=0; i<links.length; i++) {
        links[i].addEventListener('click', addClick(), false);
    }
}

通过这种方式，您可以使用一个充当全局计数器的函数。

Answer 4

＆＃13;

function MyCounter(squares){
    this.turn = 0;

    this.addClick = function() {
        this.turn ++;
        console.log(this.turn);
    };

    var that = this;
    for(var i = 0; i < squares.length; i++){
        squares[i].addEventListener('click', function(){
    	    that.addClick();
        }, false);
    }
}

var squares = document.getElementsByClassName('box');
var c = new MyCounter(squares);

＆＃13;

<ul class="boxes">
    <li class="box">box</li>
    <li class="box">box</li>
    <li class="box">box</li>
    <li class="box">box</li>
    <li class="box">box</li>
    <li class="box">box</li>
    <li class="box">box</li>
    <li class="box">box</li>
    <li class="box">box</li>
</ul>

＆＃13;

Answer 5

如果框填充了ul元素的大小（而不是创建多个侦听器），则可以始终使用此方法

<ul id="boxes" class="boxes">
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
        <li class="box"></li>
      </ul>

    <script>


var squares = document.getElementById("boxes");
squares.addEventListener('click', function (el) {
    if ("HTMLLIElement" === el.target.constructor.name) {
        //counter++
    }
}, true);
    </script>

使用addEventListener调用方法onclick

5 个答案: