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事件规范中标记为已弃用，因为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]);

Answer 2

@ Undefined的回答给了我一个想法。由于Mutation Events已被弃用，这不是一个很好的解决方案，但无论如何：

$(document).bind("DOMNodeInserted", function(e) {
  $(e.target).trigger('appendedToDOM');
});

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

2 个答案: