css选择器监听器addSelectorListener

davidwalsh的文章提到利用animationStart事件来监测新元素,但只提供了思路,在实际应用中可以做以下优化:

代码如下:

function addSelectorListener(selector, handler) {
    var uid = "js-live-",
        $style = document.createElement("style");

    function animationStart(e) {
        if(e.animationName == uid) {
            var element = e.target;
            element.classList.add(uid);//增加触发标志,去除animation占用
            handler(element, selector);
        }
    }

    //选择器有变动则触发animationstart,然后调用回调
    document.getElementsByTagName("head")[0].appendChild($style);
    for(var i=0,el=$style; el = el.previousElementSibling; i++) ;//利用style标签的位置做uid
    uid += i;
    $style.appendChild(document.createTextNode("@-webkit-keyframes "+uid+" {0%{}}@keyframes "+uid+" {0%{}}"+selector+":not(."+uid+"){-webkit-animation:"+uid+" 1ms;animation:"+uid+" 1ms}"));
    document.addEventListener("webkitAnimationStart", animationStart, false);
    document.addEventListener("animationstart", animationStart, false);
}