在前端开发中，contenteditable属性是一个非常有用的特性，它可以将任何元素变为可编辑的状态，用户可以直接在页面上进行编辑，并且可以通过JavaScript来操作和获取其中的内容。
但是当用户修改了这些内容时，我们如何获得通知呢？这就需要使用到contenteditable变化事件。本文将深入探讨contenteditable变化事件的各种细节，并提供一些示例代码，以便读者更好地学习和理解。
contenteditable属性介绍
在HTML中，我们可以通过设置元素的contenteditable属性来使其具有可编辑的功能。例如：
<div contenteditable="true"> 这是一个可编辑的区域。 </div>
这样，用户就可以直接在这个区域内进行编辑，并且可以输入文字、插入图片等等。而且，我们还可以通过JavaScript来获取和修改其中的内容，例如：
const editableDiv = document.querySelector('div[contenteditable]');
editableDiv.innerHTML = '新的内容';contenteditable变化事件
当用户对可编辑元素进行修改时，我们需要能够获得通知，以便执行后续的操作。这就需要使用到contenteditable变化事件。
在DOM4规范中，定义了两个contenteditable变化事件：
- input事件：在可编辑元素的值发生改变时触发。
- change事件：在可编辑元素失去焦点时，如果其值已经改变，则触发。
这两个事件都是非常有用的，但是它们之间有一些差异，需要我们注意。
input事件
input事件在用户每次输入时都会被触发，因此它非常适合用于实时地响应用户的输入。例如：
const editableDiv = document.querySelector('div[contenteditable]');
editableDiv.addEventListener('input', () => {
console.log(editableDiv.innerHTML);
});在这个示例中，我们监听了可编辑元素的input事件，并且在每次输入时，将其中的内容输出到控制台上。这样，我们就可以实时地获得用户的输入内容。
需要注意的是，input事件并不是所有浏览器都支持的，尤其是在IE和Edge中，存在一些兼容性问题。因此，我们通常需要进行一些额外的处理，以确保代码能够在各种浏览器中正常工作。
change事件
change事件则比较适合用于在用户完成编辑后，执行一些操作。例如：
const editableDiv = document.querySelector('div[contenteditable]');
editableDiv.addEventListener('change', () => {
console.log(editableDiv.innerHTML);
});在这个示例中，我们监听了可编辑元素的change事件，并且在编辑完成后，将其中的内容输出到控制台上。这样，我们就可以在用户完成编辑后，对其中的内容进行进一步的处理。
需要注意的是，change事件只有在可编辑元素失去焦点时才会触发，因此它并不适合用于实时地响应用户的输入。
兼容性处理
由于input事件和change事件并不是所有浏览器都支持的，因此我们需要进行一些兼容性处理。通常，我们可以使用下面的代码来判断当前浏览器是否支持这两个事件：
-- -------------------- ---- ------- ----- ---------------- - --------- -- -------------------------------- ----- ---------------------- - ---------- -- -------------------------------- -- ------------------ - -- ------------ - ---- - -- ------------- - -- ------------------------ - -- ------------- - ---- - -- -------------- -
通过这种方式，我们就可以根据浏
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8620
