时间戳

首页 > 解决方案 > 如何收听内容的变化？

javascript - 如何收听内容的变化？

问题描述

我有一个<span>包含一些内容的元素。当您键入内容时，内容会发生变化。我怎样才能听到这些事件？

例如 ：

<span> Start content </span>

经过一些内容更改

<span> Changed content </span>

有什么方法可以收听关键事件（如 keyup、blur）？

标签： javascripthtml

解决方案

您可以收听该DOMSubtreeModified事件。

然而，这听起来不是一个好主意。你说：

有什么方法可以收听关键事件（如 keyup、blur）？

您应该在更改跨度内容的代码旁边使用调用此代码。否则，您应该使用输入元素来监听您列出的事件。

下面是一个使用DOMSubtreeModified事件的例子：

const content = document.getElementById('content')
const append = () => content.innerText += ' change'

content.addEventListener('DOMSubtreeModified', () => console.log('change'))
<span id="content">Content</span>
<br>
<button onclick="append()">Change content</button>

以下是使用change(其作用类似于blur，但仅在发生更改时触发) 和keypress事件的示例：

const content = document.getElementById('content')

content.addEventListener('change', () => console.log('change'))
content.addEventListener('keypress', () => console.log('keyPress'))
<input type="text" id="content" value="Content">

推荐阅读