原生JavaScript编写的mouseover事件失效 悬停无法触发元素文本修改

问题根源 #

• for循环的三段参数完全搞混了作用，导致绑定事件的代码一次都没执行
  你写的循环是for(var i=0; i++; i<gridShips.length)，和JS里for循环的执行逻辑完全不匹配：
  1. for第一段是初始化变量，你写的var i=0没问题
  2. for第二段是判断要不要继续跑循环，你在这里放了自增操作i++。第一次运行到这的时候，后置自增会返回i的初始值0，转成布尔值是假，循环直接就停了
  3. for第三段是每次循环跑完要做的增量操作，你在这里放了长度判断i<gridShips.length，根本没实现i累加的逻辑
     说白了就是循环体里给元素绑mouseover监听的代码，压根就没被执行过，自然不会有悬停改文本的效果。你看到的点击变X的现象，是之前调试时残留在页面上的click事件触发的，根本不是当前这段代码的运行结果。

修正方法 #

把for循环的三段参数按正确逻辑归位：把循环判断条件放到第二段，把i的自增放到第三段就行。另外绑事件的时候没必要套一层匿名函数传参，事件对象会被自动传给绑定的处理函数，直接传函数名就行。
修正后的可运行代码：

var gridShips = document.querySelectorAll('.ships');

// 补全正确的循环逻辑
for(var i = 0; i < gridShips.length; i++){
    gridShips[i].addEventListener('mouseover', placeShips, false);
}

function placeShips(e){
    e.target.textContent = 'X';
}

测试的时候记得刷新页面清掉之前残留的旧事件监听，避免旧逻辑干扰效果。

内容的提问来源于stack exchange，提问作者user15606194