js中的事件委托

事件委托: 利用冒泡原理,把事件加到父级,触发执行效果.

好处1 提高性能

- 例子1

<ul id="ul">
    <li>000001</li>
    <li>000002</li>
    <li>000003</li>
  </ul>
  <script type="text/javascript">
    var ul = document.getElementById('ul');
    var li = ul.getElementsByTagName('li');
    //用事件委托,通过li的父元素ul,给li添加点击事件
    ul.onmouseover = function (event) {
 
    // event对象用于存储事件的数据，例如触发事件的元素、鼠标的位置及状态、按下的键等等；
    // event对象只在事件发生的过程中才有效。
    // firefox跟IE使用的event的方法不同，IE的event是全局变量，随时可用；firefox需要在事件方法的参数里写event才能用，是运行时的临时变量。
    // 在IE/Opera中是window.event，在Firefox中是event；
 
     var event = event || window.event; //event对象
     var target = event.target || event.srcElement; //onmouseover事件的调用者
     if (target.nodeName.toLowerCase() == 'li') { // onmouseover事件的调用者的DOM元素标签名
       target.style.background = 'red';
     }
    }
    ul.onmouseout = function (event) {
      var event = event || window.event;
      var target = event.target || event.srcElement;
      if (target.nodeName.toLowerCase() == 'li') {
        target.style.background = '';
      }
    }
  </script>

好处2 动态添加的元素,也会被绑定li该有的事件

- 例子2

<input type="button" id="btn" value="添加li">
<ul id="ul">
  <li>111111</li>
  <li>22222</li>
  <li>33333</li>
</ul>
 <script type="text/javascript">
   //获取元素
   var ul = document.getElementById('ul');
   var btn = document.getElementById('btn');
   //鼠标覆盖
   ul.onmouseover = function (event) {
     var event = event || window.event;
     var target = event.target || event.srcElement;
     if (target.nodeName.toLowerCase() == 'li') {
       target.style.background = 'red';
     }
   }
   //鼠标离开
   ul.onmouseout = function (event) {
     var event = event || window.event;
     var target = event.target || event.srcElement;
     if (target.nodeName.toLowerCase() == 'li') {
       target.style.background = '';
     }
   }
   //点击添加li按钮
   btn.onclick = function () {
     var lisLength = ul.getElementsByTagName('li').length;
     var newLi = document.createElement('li');
     newLi.innerHTML = 11111*(lisLength+1);
     ul.appendChild(newLi);
   }
 </script>