jQuery：如何监听DOM更改？

Question

是否有可能，我如何通过jQuery监听整个DOM树的更改？

我的具体问题：我有一个'工具提示'功能，当您在任何html元素上hover时，以时尚的方式显示title属性的内容。 但是，当您执行悬停时，标准浏览器会在自己的框中呈现title 。 我想压制它。 所以我想到的是在第一次加载页面时将title属性的内容移动到自定义（HTML5） data-title属性，然后我的工具提示函数将使用data-title 。

问题是，稍后我可能会动态添加/删除/更改HTML，因此我需要“重新绑定”这些元素 - 再次更改这些标题。 如果有一个事件监听器会为我监听这些更改并自动重新绑定元素，那就太好了。

Answer 1

我最好的猜测是你想听DOM变异事件。 你可以通过DOM突变事件做任何正常的javascript事件，如鼠标点击。

参考： W3 MutationEvent

例：

$("element-root").bind("DOMSubtreeModified", "CustomHandler");

Answer 2

[编辑回复成员Tony的研究]

所以，如果没有额外的代码，这是一个盲目的镜头，但在我看来这里有两件事要考虑：1。默认的浏览器工具提示行为; 2.可能更新的DOM以及自定义工具提示继续运行的能力。

关于＃1： 将自定义事件绑定到元素时，可以使用event.preventDefault()以便不显示工具提示。 这不能正常工作。 因此，继续使用“title”属性的解决方法是获取值，将其推入数据对象（ $.data()函数），然后使用空字符串清空标题（removeAttr不一致）。 然后在mouseleave上，从数据对象中获取值并将其推回到标题中。 这个想法来自这里： 如何使用jQuery在浏览器中禁用工具提示？

关于＃2：您只需要将一次绑定到一个永远不会被销毁的侦听器元素，而不是重新绑定DOM更改。 通常这是某种容器元素，但它甚至可以是document （近似.live()现在已弃用）如果你真的需要一个包罗万象的容器。 这是一个使用我自己设计的假标记的示例：

var container = $('.section');

container.on('mouseenter', 'a', function() {
    var $this = $(this);
    var theTitle = $this.attr('title');
    $this.attr('title', '');
    $('#notatooltip').html(theTitle);   
    $.data(this, 'title', theTitle);
});

container.on('mouseleave', 'a', function() {
    $('#notatooltip').html('');
    var $this = $(this);
    var storedTitle = $.data(this, 'title');
    $this.attr('title', storedTitle);
});

我的不切实际的标记（仅针对此示例）位于：

<div class="section">
  <a href="#" title="foo">Hover this foo!</a>
  <div id="notatooltip"></div>
</div>

这里有一个小提琴： http ： //jsfiddle.net/GVDqn/或者有一些健全性检查： http ： //jsfiddle.net/GVDqn/1/

可能有一种更优化的方法（我老实说没有研究，如果你可以用一个选择器绑定两个单独的事件的两个单独的函数），但它会做到这一点。

您不需要根据DOM更改重新绑定，委派的侦听器将自动处理它。 而且你应该能够通过防止它来阻止默认的工具提示功能。

Answer 3

你需要在这里看一下： http ： //www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents

Answer 4

正如Greg Pettit所说，你应该在元素上使用on（）函数。

这样做允许您将选择器绑定到事件，然后当选择器返回的对象可用时，jQuery将添加此事件处理程序。

如果你想要一个函数来触发事件上的鼠标，并且你希望它在* field_title *类的所有元素上触发，你会这样做：

$('.field_title').bind('mouseenter', function() { doSomething(); });

这将触发具有* field_title *类的任何对象上的over over mouse事件并执行函数doSomething（） 。

希望有道理:)