事件委托

事件流（事件捕獲 / 事件冒泡）

 addEventListener 

addEventListener(event, handler[, options])

    options是个对象， 可用值如下

        {passive: true/false}  默认值为false, 在true的情况下，不能使用preventDefault，阻止默认事件的发生（比如a链接，表单submit等）

        {once: true/false}  表示registe的listener是否只能被触发一次

        {capture: true/false}  表示是否在捕获阶段触发事件， 如果设为true在捕获阶段触发，false就会在冒泡阶段触发

addEventListener(event, handler[, userCapture])

    userCapture 默认为false. 设为true的时候表示在事件捕获阶段触发事件侦听

bind

 attactEvent 

IE9一下的浏览器不支持addEventListener, removeEventListener, Event.preventDefault 和Event.stopPropagation 等方法

兼容： https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

 Polyfill.js

 

 事件委托 

将多个子元素的事件侦听添加到父元素上进行侦听， 这样可以减少内存损耗，提高性能，而且事件绑定更加简单方便

<ul id="list">
  <li className="class-1">item 1</li>
  <li>item 2</li>
  <li className="class-1">item 3</li>
  ......
  <li>item n</li>
</ul>

document.getElementById('list').addEventListener('click', function (e) {
  // 兼容性处理
  var event = e || window.event;
  var target = event.target || event.srcElement;
  // 判断是否匹配目标元素element.matches()
  if (target.matches('li.class-1')) { 
    console.log('the content is: ', target.innerHTML);
  }
});

element.matches的po'l'li'f'y

if (!Element.prototype.matches) {
  Element.prototype.matches =
    Element.prototype.matchesSelector ||
    Element.prototype.mozMatchesSelector ||
    Element.prototype.msMatchesSelector ||
    Element.prototype.oMatchesSelector ||
    Element.prototype.webkitMatchesSelector ||
    function(s) {
      var matches = (this.document || this.ownerDocument).querySelectorAll(s),
        i = matches.length;
      while (--i >= 0 && matches.item(i) !== this) {}
      return i > -1;            
    };
}

转载于:https://my.oschina.net/u/4085373/blog/3021551