事件流：描述从页面中接收事件的顺序 冒泡 捕获

事件捕获阶段、处于目标阶段、事件冒泡阶段

IE 提出的 事件冒泡流 (Event Bubbling)

Netscape 提出的 事件捕获流 (Event Capturing)

DOM0 onXXX onmouseover onmouseout

DOM1 没有 定义事件模型

DOM2 addEventListener(3个参数) -> W3C规范

removeEventListener

事件源对象 target srcElement

fixfox : target
IE : srcElement
chrome target srcElement
**

demo 输出点击li的内容 含包括新增项目

  1. <body>
  2.     <button>增加</button>
  3.     <ul>
  4.         <li>1</li>
  5.         <li>2</li>
  6.         <li>3</li>
  7.         <li>4</li>
  8.         <li>5</li>
  9.         <li>6</li>
  10.         <li>7</li>
  11.         <li>8</li>
  12.         <li>9</li>
  13.         <li>10</li>
  14.     </ul>
  15. </body>
  16. <script>
  17.     var oList = document.getElementsByTagName('ul')[0],
  18.         oLi = document.getElementsByTagName('li'),
  19.         oBtn = document.getElementsByTagName('button')[0],
  20.         len = oLi.length,
  21.         item;
  23.     for(var i = 0;i<len;i++){
  24.         item = oLi[i];
  25.         item.onclick = function(){
  26.             console.log(this.innerText);
  27.         }
  28.     }
  29.     oBtn.onclick = function(){
  30.         var li = document.createElement('li');
  31.         li.innerText = oLi.length + 1;
  32.         oList.appendChild(li);
  33.     }
  35. </script>

结果 无法输出新增项目 因为第一次就循环绑定了所有的li 但并不包括后面新增的

事件委托 事件代理

<body>
    <button>增加</button>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</body>
<script>
    var oList = document.getElementsByTagName('ul')[0],
        oLi = document.getElementsByTagName('li'),
        oBtn = document.getElementsByTagName('button')[0],
        len = oLi.length,
        item;

    // 事件委托 事件代理 
    oList.onclick = function(e){
        console.log(e);
        var e = e || window.event,
        tar = e.target || e.srcElement;
        console.log(tar.innerText);
    }


    oBtn.onclick = function(){
        var li = document.createElement('li');
        li.innerText = oLi.length + 1;
        oList.appendChild(li);
    }

</script>

打印下标 闭包写法 （缺点无法打印新增项下标）

<body>
    <button>增加</button>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</body>
<script>
    var oList = document.getElementsByTagName('ul')[0],
        oLi = document.getElementsByTagName('li'),
        oBtn = document.getElementsByTagName('button')[0],
        len = oLi.length,
        item;

    // 事件委托 事件代理 
    oList.onclick = function (e) {
        console.log(e);
        var e = e || window.event,
            tar = e.target || e.srcElement;
        // console.log(tar.innerText);
        for (var i = 0; i < len; i++) {
            item = oLi[i];
            if(tar === item){
                console.log(i);
            }
        }
    }

    oBtn.onclick = function(){
        var li = document.createElement('li');
        li.innerText = oLi.length + 1;
        oList.appendChild(li);
    }

</script>

Array.prototype.indexOf.call 写法

<body>
    <button>增加</button>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</body>
<script>
    var oList = document.getElementsByTagName('ul')[0],
        oLi = document.getElementsByTagName('li'),
        oBtn = document.getElementsByTagName('button')[0],
        len = oLi.length,
        item;

    // 事件委托 事件代理 
    oList.onclick = function (e) {
        console.log(e);
        var e = e || window.event,
            tar = e.target || e.srcElement;
        // console.log(tar.innerText);
        var index = Array.prototype.indexOf.call(oLi,tar);
        console.log(index);
    }

    oBtn.onclick = function(){
        var li = document.createElement('li');
        li.innerText = oLi.length + 1;
        oList.appendChild(li);
    }

</script>

课后作业 todolist 未做 10课已做