js之 matches （可以取代jq的 delegate 方法）

問題：請給#wrap 下面的子元素添加點擊事件！

<div id="wrap">
    <a class="btn" href="http://www.lyblog.net">點擊代碼</a>
    <span class="btn">不可點擊按鈕</span>
</div>

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