javascript - 面对未知的页面（别人的页面），怎么定时更新DOM的事件绑定？

Question

本人想要实现一个获得被点击页面元素的xpath的chrome扩展，目前是冒泡机制，在页面所有元素绑定一个click事件，在响应的函数里面记录自己的标签以及相对位置啥的。

但是现在遇到一个问题，就是可能是网页上的一些元素可能在加载的时候没能绑定上这个事件，也许是因为ajax的异步更新或者是其他原因，导致的结果是点击这些元素的时候只会显示一部分的xpath,也就是说click事件一路向上冒泡，直到节点是已经被绑定的节点的时候才输出信息。

具体的现象就是，点击页面一个元素，只输出一部分xpath。本来觉得如果是元素没加载完可以setTimeout一下，然并卵。然而，如果刷新页面的话，再点击元素却可以得到正确的路径。

不知道这个问题如何解决，还请各位大佬们指点!

代码：

        $(*).on("click",function(e) {
          var route = "/"+$(this).prop("tagName")+"["+($(this).parent().children($(this).prop("tagName")).index($(this))+1)+"]";
          console.log(route);
          Add(route);
        });

更改后的代码：

document.addEventListener('click',function handler(e){
          var route = "/"+$(e.target).prop("tagName")+"["+($(e.target).parent().children($(e.target).prop("tagName")).index($(e.target))+1)+"]";
          console.log(route);
          console.log(e.target.tagName);
          var p = e.target;

          while(p!=this){
            p = p.parentNode;
            var route = "/"+$(p).prop("tagName")+"["+($(p).parent().children($(p).prop("tagName")).index($(p))+1)+"]"+route;
            console.log(p.parentNode);
            console.log(route);
          }
    },false);

有问题的页面：

http://www.duitang.com/blog/?...

具体就是堆糖网的图片的那个切换的箭头。
额，原来的代码在刷新之后能够截获准确地便签，而如今的代码刷新后也没法截获的样子。
————————————————————————————分割线——————————————————————————————
以上代码是可以用的，因为控制台是能够正确输出的，应该是别的什么原因，感谢各位高手们的回答！

Answer 1

其实你这里可以用事件委托：

    $(window).on("click",function(e){});

好处：即使是后添加的节点也没有问题；
缺点：
1.遇到$(window).off("click")就oooooop了；
2.遇到e.stopPropagation()也一样ooooop

---

针对以上两点问题，可以换成这种：

//在捕获阶段触发事件
document.addEventListener("click",function handler(e){console.log(e)},true);
//删除事件
document.removeEventListener("click",handler);
    

Answer 2

使用事件代理，通过this来识别被点击的元素是哪一个