为尚未附加的元素绑定"插入DOM事件"

Question

我正在寻找这样的东西:

var div = document.createElement('div');
div.id = 'proprioceptiveDiv';
$(div).on('appendedToDOM', function() {
  // ...
});

document.body.appendChild(div); // triggers above handler

这存在吗？我正在使用jQuery而宁愿不为此功能导入整个插件或其他库,所以我只对一个简短的解决方案感兴趣.

Answer 1

您可以使用Mutation Events，但这些事件已在 DOM Events 规范中被标记为已弃用，因为 API 的设计存在缺陷。

MutationEvent 接口是在 DOM Level 2 Events 中引入的，但尚未在用户代理之间完全且可互操作地实现。此外，也有人批评该界面的设计带来了性能和实施方面的挑战。DOM4 提供了一种使用 MutationObserver 接口的新机制，它解决了突变事件解决的用例，但以更高效的方式。因此，本规范描述了突变事件以供参考和遗留行为的完整性，但不赞成使用 MutationEvent 接口。

一种简单的选择是使用.trigger()方法：

var $div = $(div).on('appendedToDOM', function() {
  console.log('appended');
});

// ...

$div.appendTo('body').trigger('appendedToDOM');

您还可以创建一个辅助函数来附加元素并触发自定义事件：

function append(elem, target, cEvent) {
   if (typeof target === 'undefined') var target = document.body;
   if (typeof cEvent === 'undefined') var cEvent = 'appendedToDOM';
   $(elem).appendTo(target).trigger(cEvent);
}

// Usage
append(element [, targetElement] [, customEvent]);