Javascript 如何检测跨度元素的内容何时更改

假设我有

span

如下

更改前的内容

我需要一个类似这样的活动

$('#myId').contentChanged(function(){
   alert( 'New content: ' + $(this).text() )
})

所以当我改变跨度的内容时，如下所示

$（“#myId”）.text（“更改后的内容”）

触发上面的

contentChanged

事件。就性能而言，这应该是相当有效的，因为在我的情况下，可能会有数百个设备被监控。

您可以这样尝试：

$(document).ready( function() {
     $('#myId').bind( "contentchange", function(){
          alert("Changed");
    });

    $( "#btn" ).click( function () {
        $('#myId').html( "Value" ).trigger( "contentchange" );
    });
});

---

您可以创建一个间隔来检查更改：

function monitorElementText(selector) {
    var $el = $(selector);
    $el.data("elementText", $el.text());

    setInterval(function() {
        if ($el.data("elementText") != $el.text()) {
            $el.trigger("change");
            $el.data("elementText", $el.text());
        }
    }, 50);

    return $el;
}

并按以下方式实施：

monitorElementText("#span1").on("change", function() {
    alert( 'New content: ' + $(this).text() );
});

---

有大量这样的设备在运行可能不是件好事。但是，如果您只监视几个元素，它可能对您有用。

MutationObserver

允许您监视DOM节点。实际代码取决于您的具体情况，请参阅。请记住，对于较旧的浏览器，您必须使用不推荐的

MutationEvent

s来实现它，但它们的性能POV优于计时器。

谢谢您的回答。但是，我自己无法触发

contentchange

。内容在没有我控制的情况下被更改。@celalo:-尝试为添加处理程序并同时检查@celalo:-您是否在寻找类似的内容：-我试图避免性能问题的间隔检查。我想可能会有一个本地DOM事件来更有效地处理这个案例。@celalo:-你检查了我刚才在评论中添加的小提琴了吗。这不需要触发器（）谢谢，这似乎是一个合适的解决方案，但我不太愿意使用间隔检查来解决性能问题。我可能需要检查几十个。同意。但我不知道有任何JS事件能够以浏览器级别所需的方式处理事件。@celalo:下面是一篇类似的SO文章。不确定它是否适用于文本内容更改，而且它显然有一些浏览器版本限制：谢谢。我会调查的。谢谢你的提示。我将深入研究这个主题，看看我是否能设法利用它们。你有没有看过使用MVVM框架，比如KnockoutJS或AngularJS？Knockout特别允许您拥有“订阅者”，当绑定到ViewModel的DOM节点发生更改时，这些订阅者将收到通知。下面是一个使用Knockout:的实时示例，下面是一个更详细的链接：