Javascript 如何一次为特定标记中的所有元素编写事件侦听器？

我想编写一个事件侦听器函数，当我的

标记中的任何元素被编辑时需要调用该函数。
例如，对于给定ul中的元素

<ul class="container">
  <h4 contenteditable="true">hi</h4>
  <h5 contenteditable="true">hi</h5>
  <label>
    <input id="indeterminate-checkbox" type="checkbox" />
    <span contenteditable="true">Indeterminate Style</span>
  </label>
  <p contenteditable="true">hi</p>
  <blockquote contenteditable="true">sup</blockquote>
</ul>

你好
你好
不确定风格
你好

啜饮

我只想使用

element.addEventListener（）

一次（我不能只为

ul

声明contenteditable，并为产生不需要的UI更改的内容添加listener）。另外，如果可能的话，我想一次为所有这些元素声明

onchange

（比如来自css）。

---

之所以要这样做，是因为我正在动态添加元素，并希望删除冗余代码。

请看下面的第二个答案： 您可以对ul中的所有contenteditable元素执行此操作

$( "ul.container" ).on( "focus", "[contenteditable=true]", function() {
  //here you save the content innerhtml/text, etc of the element
});

然后使用“blur”事件，当您离开一个元素时，您可以测试旧内容是否相同，然后执行一些操作。

---

有关“on”jquery函数的参考信息：

您可以使用jquery还是纯JavaScript？这可能会有帮助：（将事件侦听器添加到动态元素）@Barmar我不认为这个问题应该作为另一个问题的重复来结束。这是关于JavaScript的，这是关于jQuery（一个特定的库）。现在这个问题锁定在那些想要提交的人身上answers@vol7ron我已经添加了Doug提到的dupe，它只是简单的JS。我的dupe close哲学是，如果问题足够相似，“这里有答案”是真的，我会使用它。试图找到一个“精确的复制品”的目标太窄了。