CSS选择器监听器addSelectorListener

2022年9月30日 79点热度 0人点赞 0条评论

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

  • 使用空keyframes内容减少属性污染
  • 增加触发标志位避免animation属性被长时间占用,触发后立即销毁
  • 改进的animation-name的uid机制
  • js动态生成css,避免还要另写css
  • 用了!important来增大权重,有可能导致更高权重的css覆盖导致事件失效

代码如下:

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);
}

 


原文标题:css选择器监听器addSelectorListener
原文链接:http://hai.li/2016/01/29/js-add-selector-listener.html
原文快照:https://web.archive.org/web/20210515141135/http://hai.li/2016/01/29/js-add-selector-listener.html

帮助教程

提供最新的帮助教程,方便使用。

文章评论