JS中的事件委托

要实现一个需求，当鼠标悬浮在 li 元素上，li 元素背景变成红色，离开时，去掉背景。

<ul id="ul">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

window.onload = function() {
  var oUl = document.getElementById('ul');
  var aLi = oUl.getElementsByTagName('li');

  for (var i = 0; i < aLi.length; i++) {
    aLi[i].onmouseover = function() {
      this.style.background = 'red';
    };
    aLi[i].onmouseout = function() {
      this.style.background = '';
    };
  }
};

我们循环遍历每一个 li 元素，并为之加上 mouserover 和 mouseout 事件。

这只适用于 li 元素特别少的情况，如果 li 元素特别多，定会引起性能问题。

js中的事件委托
js事件委托总结