在前端开发中，我们需要经常监听 DOM 元素的变化，并在变化发生时执行相应的操作。然而，在实际开发中，我们可能会遇到需要监听 DOM 变化却找不到适合的事件的情况。这时，很多开发者会想到一个问题：是否存在类似于“on DOM change”事件？
问题
首先，让我们来看一下具体的问题：在 HTML 中，我们可以使用 input 标签来创建表单元素，但是该标签没有提供“on value change”事件。也就是说，如果我们想要实时获取输入框的内容并进行处理，就必须手动添加事件监听器。
解决方案
MutationObserver
在这种情况下，可以使用 MutationObserver 来监听 DOM 树的变化。MutationObserver 是一个 JavaScript API，可以异步地监视 DOM 树的变化。当 DOM 树中的任何一部分发生变化时，都会触发回调函数，并将变化的详细信息传递给回调函数。
以下是一个示例代码：
-- -------------------- ---- -------
----- -------- - --- -------------------------- -- -
-------------------------- -- -
-------------------------- -----------------
---
---
-------------------------------------------------- -
----------- -----
---------- -----
-------------- ----
---上述代码创建了一个 MutationObserver 实例，并指定了要观察的 DOM 元素及其属性。在回调函数中，我们可以通过遍历 mutations 对象来获取变化的详细信息。
事件委托
除了使用 MutationObserver，还有一种常见的方式是使用事件委托。事件委托是指将事件处理程序添加到父元素上，而不是直接添加到目标元素上。当子元素触发事件时，事件会冒泡到父元素，并由父元素上的事件处理程序进行处理。
以下是一个示例代码：
-- -------------------- ---- -------
---- ------------
------ ----------- -----------
------
--------
----------------------------------------------------------- ----- -- -
-- ------------- -- ------------------------------- -
--------------------------------
-
---
---------上述代码将事件处理程序添加到父元素 #parent 上，并通过判断事件源是否为目标元素 #input 来处理事件。
总结
总之，在前端开发中，我们需要经常监听 DOM 变化并执行相应的操作。虽然没有像“on DOM change”这样的事件，但是我们可以使用 MutationObserver 或者事件委托来实现类似的功能。以上就是解决该问题的两种常见方式，希望能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28792