Question

添加事件监听器不调用Play函数，我不明白为什么？

var btn = document.querySelector('#btn');
var title = document.querySelector('#title');
var count = 0, rand = 0 , sum =0;
var one = document.getElementById('one');
btn.addEventListener('click',play);


function play()
{
count = 8200;
this.rand = Math.floor(Math.random() *7)+1;
this.sum +=rand;
one.textContent = sum;
if(sum >= 100)
    {
        title.textContent = 'You won!'
    }
}

我尝试在Firefox调试器上调试id，结果表明它会跳转直接到代码的末尾。为什么play方法不执行？

Answer 1

您不应使用this。 this中的play()将是触发事件的btn元素。

如果使用addEventListener()将处理程序函数附加到元素，则处理程序内的 this的值是对该元素的引用

请参见The value of this within the handler

var btn = document.querySelector('#btn');
var title = document.querySelector('#title');
var count = 0, rand = 0 , sum =0;
var one = document.getElementById('one');
btn.addEventListener('click',play);


function play()
{
  count = 8200;
  rand = Math.floor(Math.random() *7)+1;
  sum +=rand;
  one.textContent = sum;
  if(sum >= 100)
  {
     title.textContent = 'You won!'
  }
}

<button id="btn">click</button>
<div id="title">Title</div>
<div id="one"></div>

对addEventListener的迷恋

1 个答案: