javascript - CSS 或 jQuery 可以覆盖注入(inject)的 onkeyup 属性吗？

Question

我正在使用 Chrome 扩展来修改 input 元素，方法是添加一个在文本超过 30 个字符时触发警报的函数:

inputElement.onkeyup = function () { ... some code here ... };

在对应用程序进行 UI 更新之前，这按预期工作。现在它坏了。新的 UI 表面上发生了变化，我想反射(reflect)了新的 CSS。我可以改变 inputElement 的默认值，所以我知道我仍然正确地点击了元素。新的 CSS 或应用程序自己的 jQuery 是否会阻止我的功能正常工作？如果有，有解决办法吗？

更新:只是为了澄清。我的问题不是，“为什么下面的代码不起作用？它是，“可以将 onkeyup 注入(inject)到当前没有此属性的输入表单中，是否会被web 应用程序，例如 CSS 或 jQuery？”Maximillian Laumeister 建议，我尝试了 addEventListener 方法，这很有效。不过，这是万无一失的吗？是否有万无一失的解决方案？或者是它更多的是对应用程序的每次更新进行测试并重新评估？

Answer 1

要注入(inject) onkeyup 函数而不影响任何已经存在的 onkeyup 函数，您应该使用事件监听器。

如果存在现有的 onkeyup 函数或事件监听器，请使用 addEventListener 购买，我们只是添加到那里，所以它不会干扰现有功能。

如果没有现成的 onkeyup 函数，它也可以工作——同样是因为通过使用 addEventListener 我们没有触及任何函数赋值或事件监听器，它们可能已经或可能还没有那里。

---

以下是如何在代码中添加事件监听器(现场演示):

document.getElementById("theinput").addEventListener("keyup", function() {
  if (this.value.length > 30) alert("Greater than 30 chars");
  document.getElementById("output").textContent = this.value.length;
});

<div>Type in the box to see character count</div>
<input id="theinput" />
<div id="output"></div>