原生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)