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

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

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

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

DOM0 onXXX onmouseover onmouseout

DOM1 没有 定义事件模型

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

removeEventListener

onclick
冒泡 事件源向父级，当父级绑定相同事件时触发父级绑定的事件，其实点击事件所以元素都有，只不过元素默认没有触发事件，为空
捕获 事件源相同的事件，事件源的事件先不触发，找父级是否有相同的事件，找到绑定相同事件的最外层元素，绑定事件与尽量外层同时满足，从那个父元素指向事件源的方向，那个父元素的点击事件触发，再向子元素传递事件，传递到事件源

image.png
事件流：
事件捕获：
事件冒泡：
处于捕获：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8. </head>
  9. <div></div>
  10. <button></button>
  11. <body>
  12.     <script>
  13.         var div =document.getElementsByTagName('div')[0];
  15.         console.log(div.onclick)
  16.         div.onclick = function() {
  17.             console.log('div')
  18.         }
  20.         // div.addEventListener('click',function() {
  21.         //     console.log('div')
  22.         // },false)
  23.         console.log(div.onclick)
  25.     </script>
  26. </body>
  27. </html>

image.png

事件源对象 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 但并不包括后面新增的

事件委托 事件代理

  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.     // 事件委托 事件代理 
  24.     oList.onclick = function(e){ //事件对象 事件对象有属性，可以找到哪个元素触发了事件
  25.         console.log(e);
  26.         var e = e || window.event,
  27.         tar = e.target || e.srcElement;
  28.         console.log(tar.innerText);
  29.     }
  32.     oBtn.onclick = function(){
  33.         var li = document.createElement('li');
  34.         li.innerText = oLi.length + 1;
  35.         oList.appendChild(li);
  36.     }
  38. </script>

如果没有事件委托，必须循环，循环就会消耗性能

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

  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.     // 事件委托 事件代理 
  24.     oList.onclick = function (e) {
  25.         console.log(e);
  26.         var e = e || window.event,
  27.             tar = e.target || e.srcElement;
  28.         // console.log(tar.innerText);
  29.         for (var i = 0; i < len; i++) {
  30.             item = oLi[i];
  31.             if(tar === item){
  32.                 console.log(i);
  33.             }
  34.         }
  35.     }
  37.     oBtn.onclick = function(){
  38.         var li = document.createElement('li');
  39.         li.innerText = oLi.length + 1;
  40.         oList.appendChild(li);
  41.     }
  43. </script>

image.png
image.png
得到下标，得到数字

Array.prototype.indexOf.call 写法

  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.     // 事件委托 事件代理 
  24.     oList.onclick = function (e) {
  25.         console.log(e);
  26.         var e = e || window.event,
  27.             tar = e.target || e.srcElement;
  28.         // console.log(tar.innerText);
  29.         var index = Array.prototype.indexOf.call(oLi,tar);
  30.         console.log(index);
  31.     }
  33.     oBtn.onclick = function(){
  34.         var li = document.createElement('li');
  35.         li.innerText = oLi.length + 1;
  36.         oList.appendChild(li);
  37.     }
  39. </script>

课后作业 todolist 未做 10课已做