js中的事件委托

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>