Javascript 在文档中添加或删除元素时激发什么事件？

我正在为Tiddlywiki制作一种选项卡式界面，我想知道如何在每次打开或关闭tiddler时激活此代码。Tiddlywiki是一种在浏览器中运行的HTML笔记本类型，tiddler是

#tiddlerDisplay

中的div。一次可以而且通常不止一个

我想列出的div包含在

#tiddledisplay

中，而列表本身就是

jQuery（“#主菜单>#singletiddlelist”）

---

更新：我不能只添加自定义事件，除非我可以在当前代码之外（例如加载文档时触发的事件）添加自定义事件。

首先为追加/清除div创建两个自定义事件。将它们绑定到您使用上面发布的代码的文档中

jQuery(document).bind('div-removed',function(e){ 
  // code stuff to do for removal 
  jQuery("#mainMenu > #singleTiddlerList").empty(); // required
  // other stuff here
});
jQuery(document).bind('div-appended',function(e){ 
 // code stuff to do on append 
        jQuery("#tiddlerDisplay > div").each(function(i,e){
            jQuery("#mainMenu > #singleTiddlerList").append(jQuery(
                createTiddlyButton(document.createElement("li"),jQuery(e).attr("tiddler"),"",config.macros.singleTiddler.clickHandler)
            ).parent());
        }); // required
  //other stuff here
});

然后在代码中稍微更改执行：

config.macros.singleTiddler.update = function(){
  $(document).trigger("div-removed");
  $(document).trigger("div-appended");  
};

这肯定不是唯一的方法（我想现在它也可以用

.promise（）

来完成，但这是一个开始。更新来检查这是否有效。

一种方法是

jQuery（#tiddlerDisplay”）.bind（“domsubtreedimmed”，config.macros.singleTiddler.update）；

，但我认为这只适用于Chrome（可能是Opera或Safari，不确定），而且似乎也被弃用了。Firefox有两个事件来完成同样的事情，但我认为它们也被弃用了

在阅读和探索TiddlyWiki源代码后，我发现的另一种方法是：

(function( $, oldRem ){
    Story.prototype.displayTiddler = function(){
        var resp = oldRem.apply( this, arguments );
        $("#tiddlerDisplay").trigger("displayTiddler");
        return(resp);
    };
})( jQuery, Story.prototype.displayTiddler );
(function( $, oldRem ){
    Story.prototype.closeTiddler = function(){
        var resp = oldRem.apply( this, arguments );
        $("#tiddlerDisplay").trigger("closeTiddler");
        return(resp);
    };
})( jQuery, Story.prototype.closeTiddler );
jQuery("#tiddlerDisplay").bind("displayTiddler", config.macros.singleTiddler.update);
jQuery("#tiddlerDisplay").bind("closeTiddler", config.macros.singleTiddler.update);

---

请注意，tiddler打开或关闭后会触发事件。此外，正如文章所述，jQuery也可能会以同样的方式被窃听，但我不知道本机DOM方法，对此我有点怀疑。它应该有一个事件，但无论如何，每个人都应该完全丢弃它们并使用jQuery！

如何创建自定义事件th bind（）删除/追加并触发它们，以便您可以返回事件响应？我无法控制执行打开和关闭的代码，也不想覆盖它。这可以从插件中完成吗？我将给出一个答案，请参见下文。第一个触发器是否仅在删除所有div或每当一个div时触发被删除？等等，我想这里有一个误解。Tiddler在

\tiddlerDisplay

中，列表在

\singleTiddlerList

中。我更新了我的问题以反映这一点。我不想编辑的代码是在

\tiddlerDisplay

中添加和删除div的代码。嗯，也许会对你有所帮助。也许你需要d委托。我应该分配什么事件？JavaScript是否有函数钩子功能，可以在调用函数时触发事件？你能看到新代码是否有效吗？实际上，你将内部代码分解为两个事件，然后触发并执行内部多余的代码。我的大脑正在与这打开的所有可能性赛跑！一年前我曾希望正是为了这个。令人惊讶的是，有时候当你不能弄明白一些事情，然后你再回来，它就有点不合时宜了。我不知道这是否被称为覆盖，但这对我来说很好。我只需要小心另一个插件覆盖它。我称之为方法窃听。

(function( $, oldRem ){
    Story.prototype.displayTiddler = function(){
        var resp = oldRem.apply( this, arguments );
        $("#tiddlerDisplay").trigger("displayTiddler");
        return(resp);
    };
})( jQuery, Story.prototype.displayTiddler );
(function( $, oldRem ){
    Story.prototype.closeTiddler = function(){
        var resp = oldRem.apply( this, arguments );
        $("#tiddlerDisplay").trigger("closeTiddler");
        return(resp);
    };
})( jQuery, Story.prototype.closeTiddler );
jQuery("#tiddlerDisplay").bind("displayTiddler", config.macros.singleTiddler.update);
jQuery("#tiddlerDisplay").bind("closeTiddler", config.macros.singleTiddler.update);