创建一个在事件发生时加 1 的 javascript 变量答案

【问题标题】：Creating a javascript variable that adds 1 when an event happens创建一个在事件发生时加 1 的 javascript 变量
【发布时间】：2018-03-24 17:52:02
【问题描述】：

背景：我正在帮助我的朋友创建一个类似政治笑话的网站。

每次触发 onmouseover 事件时，我都需要它为变量加 1。

&lt;img  src="tm.png" onmouseover='this.src="jc.png"'&gt;

到目前为止，我已经有了这个，但我需要找到一种方法将它与一个函数链接起来，该函数会在该事件发生时为其自身加 1。我在页面周围有多个 onmouseover 事件，所以我需要它来为它们工作。我知道如何制作变量，但我不确定如何在每次 onmouseover 事件发生时添加 1，我也不确定如何将函数添加到 onmouseover 事件。谢谢

【问题讨论】：

是否应该仅在图像触发mouseover 事件或任何其他元素时才增加？每张图片还是只有一张特定的图片？它应该为每个图像单独增加吗？您是否考虑过使用mouseenter 事件？您是否尝试过使用事件委托来做到这一点？

标签： javascript function variables

【解决方案1】：

hoverCounter = 0;

&lt;img src="http://www.darbsterkitty.com/uploads/5/5/5/6/55568079/b8sk1f_orig.jpg" height="200px" onmouseover="hoverCounter++; console.log('hoverCounter: ' + hoverCounter)"&gt;&lt;/img&gt;

【讨论】：

【解决方案2】：

使用事件委托并检查悬停的元素是否为图像。

var count = 0;

addEventListener("mouseover", function(e){
  if(e.target.tagName == "IMG"){
    count++;
  }
  console.log(count);
})

<img src="http://lorempixel.com/50/50?0"/>
<img src="http://lorempixel.com/50/50?1"/>

【讨论】：

【解决方案3】：

<img id="someImage1" src="http://via.placeholder.com/350x150" >
<img id="someImage2" src="http://via.placeholder.com/350x150" >

<br/>
Hover Count:
<input id="countDisplay" type="text"/>

JS：

 // Initial count
   var hoverCount = 0;

   // Function to increment
   function onHovered(event){
    hoverCount++;
     document.getElementById('countDisplay').value = hoverCount;
   }

   // Bind events
   document.getElementById('someImage1').onmouseover = onHovered;
    document.getElementById('someImage2').onmouseover = onHovered;

【讨论】：