问题：请给#wrap 下面的子元素添加点击事件！

     
    
      点击代码    
      不可点击按钮
     

jq的写法

//jQueryObject.on( events [, selector ] [, data ], handler )

$('#wrap').on('click', 'a.btn', function (e) {
       console.log(1111); })

js 写法

document.querySelector('#wrap').addEventListener("click", function (e) {        if (e.target.matches('a.btn')) {            console.log(111);        }    });

由于 'matches'支持情况也不太尽人意

通常在开发阶段兼容IE 8+及移动端，我更偏向于脱离jq等重量级的库。所以有了以下的兼容写法：

function matchesSelector(element, selector){    if(element.matches){        return element.matches(selector);    } else if(element.matchesSelector){        return element.matchesSelector(selector);    } else if(element.webkitMatchesSelector){        return element.webkitMatchesSelector(selector);    } else if(element.msMatchesSelector){        return element.msMatchesSelector(selector);    } else if(element.mozMatchesSelector){        return element.mozMatchesSelector(selector);    } else if(element.oMatchesSelector){        return element.oMatchesSelector(selector);    }}

但主要IE 8正好不支持msMatchesSelector方法，可以用如下方法处理以上函数，以便支持IE 8，完善之后的代码如下：

function matchesSelector(element,selector){    if(element.matches){        return element.matches(selector);    } else if(element.matchesSelector){        return element.matchesSelector(selector);    } else if(element.webkitMatchesSelector){        return element.webkitMatchesSelector(selector);    } else if(element.msMatchesSelector){        return element.msMatchesSelector(selector);    } else if(element.mozMatchesSelector){        return element.mozMatchesSelector(selector);    } else if(element.oMatchesSelector){        return element.oMatchesSelector(selector);    } else if(element.querySelectorAll){        var matches = (element.document || element.ownerDocument).querySelectorAll(selector),            i = 0;         while(matches[i] && matches[i] !== element) i++;        return matches[i] ? true: false;    }    throw new Error('Your browser version is too old,please upgrade your browser');}

 第二部分  替换jquery的 closest

　　Closest 获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。

 

//jquery$("selector").closest();//js    function closest(el,selector){        const matchesSelector = el.matches || el.webkitMatchesSelector ||       el.mozMatchesSelector || el.msMatchesSelector;        while (el){            if(matchesSelector.call(el,selector)){                return el;            }else {                el = el.parentElement;            }        }        return null;    }

 

 

本文参考：http://www.lyblog.net/detail/601.html

　　　　　https://github.com/oneuijs/You-Dont-Need-jQuery/blob/master/README.zh-CN.md