Question

我将通过DOM上的addEventListener找到函数附加到的所有元素。所以，我试图覆盖Element.prototype.addEventListener方法。我试图在this website上测试可用的脚本。第一个有趣的部分是，如果我将我的脚本放在HTML的head标记内。该网站不会被渲染。此外，如果我把它放在现有的Scripts之上，那么网站也不会被渲染。我的脚本需要位于应该加载JQuery库的脚本之后。然后，它有效。

我的问题是，脚本工作正常，它给了我应该附加函数的所有元素的XPath，但是，当网页加载时，没有任何函数附加到这些元素。此外，如果我点击每个元素，新的DOM将不会被渲染，因为再次调用addEventListener方法，似乎我的脚本不再起作用了。

我无法找到我的功能有什么问题阻止网站正常工作。

<script>

var arrayOfElms = new Array();
var OriginalAddEventListener = Element.prototype.addEventListener;

var EventListener = function(type,listener) {
    console.log('add event listener was called');
    OriginalAddEventListener(type, listener);
    arrayOfElms.push(getXPath(this));
};

Element.prototype.addEventListener = EventListener;


function getXPath(elm) { 
    var allNodes = document.getElementsByTagName('*'); 
    for (var segs = []; elm && elm.nodeType == 1; elm = elm.parentNode) 
    { 
        if (elm.hasAttribute('id')) { 
                var uniqueIdCount = 0; 
                for (var n=0;n < allNodes.length;n++) { 
                    if (allNodes[n].hasAttribute('id') && allNodes[n].id == elm.id) uniqueIdCount++; 
                    if (uniqueIdCount > 1) break; 
                }; 
                if ( uniqueIdCount == 1) { 
                    segs.unshift('id("' + elm.getAttribute('id') + '")'); 
                    return segs.join('/'); 
                } else { 
                    segs.unshift(elm.localName.toLowerCase() + '[@id="' + elm.getAttribute('id') + '"]'); 
                } 
        } else if (elm.hasAttribute('class')) { 
            segs.unshift(elm.localName.toLowerCase() + '[@class="' + elm.getAttribute('class') + '"]'); 
        } else { 
            for (i = 1, sib = elm.previousSibling; sib; sib = sib.previousSibling) { 
                if (sib.localName == elm.localName)  i++; }; 
                segs.unshift(elm.localName.toLowerCase() + '[' + i + ']'); 
        }; 
    }; 
    return segs.length ? '/' + segs.join('/') : null; 
}

</script>

覆盖Element.prototype.addEventListener

0 个答案: