原生JS事件綁定方式和事件委托(流)

事件

事件分兩種：普通事件和綁定事件

普通事件

• 普通事件為DOM對象的鍵值對方式 類似於元素屬性值(鍵值對) <span onclick="fn">普通事件</span>;
• 兩種事件的區別：普通事件不能重復添加，只有最后一次添加才生效，而addEventListener事件可以多次綁定生效，例如

// 只有color生效
oDiv.onclick = () => this.style.fontSize = '18px';
oDiv.onclick = () => this.style.color = 'blue';

綁定事件

• 綁定事件添加方式 EvenTarget.addEventListener(EvenName, functionName, option);
  • EventName: example => click dblclick change blur focus keyperss keydown keyup mouseover mouseout;
  • option 可以是一個對象也可以是Boolean值.
  • Boolean值時(事件流才生效), 事件運行方式true為事件捕獲階段處理事件(自上而下: 事件觸發順序), 不寫傳參時為默認false為事件冒泡階段處理(自下而上: 事件觸發順序);
    • Option對象時:
      • capture: 值為true為事件冒泡階段處理事件;
      • once: true表示添加后只調用一次, 調用后自動移除事件(removeEventListener());
      • passive: true表示永遠不會調用 event.preventDefault(); 如果仍然調用會被忽略, 則會拋出wring異常;
• 老版本瀏覽器為 target.attachEvent('onclick', function);
• 事件移除 removeEventListener();
• 阻止默認事件: event.preventDefault(); example => 點擊復選框,點擊后復選框高亮, 可以用來阻止復選框選中高亮;
• 阻止事件傳播: event.stopPropagation() 阻止事件捕獲和事件冒泡; 返回值為 undefined;
• event.stopImmediatePropagation(): 方法阻止監聽同一事件的其他事件監聽器被調用。表示只能調用當前事件, 其他事件調用失效;
• 行內事件處理器-請勿使用 后期不好維護 盡量JS HTML分開編寫
• example: <button onclick="bgChange">press me</button>
• addEventListener() and removeEventListener();
• addEventListener() 可以添加多個同一類型的事件不會覆蓋。
• removeEventListener(EventName, functionName, option) 移除不需要的事件，且非常高效。
• 事件對象 e/evt/event
  • e.target: 事件源。

事件流

事件流形成有三要素

• 1、事件類型一樣；2、事件元素為互相嵌套關系；3、事件傳遞方式相同；

事件委托

• 將子元素的重復事件綁定給父元素代理
• 使用時要注意判斷事件源 e.target是不是該代理元素的子元素

// 使用事件冒泡會方便些 因為觸發順序從里到外 符合業務要求
oUl.addEventListener('click', e => {
 if(e.target.parentNode === oUl) {
   console.log('書寫業務邏輯');
   e.stopPropagation();
 }
}, false)