将提交/提交事件处理程序附加到哪个元素？

Question

这里的什么元素是表格 object 我也可以附加提交/提交事件处理程序？ 我正在制作一个修改网站的 chrome 扩展，因此我无法完全访问检查元素之外的直接网站代码。

检查元素分解

<div class="search-inner" role="form">

我假设它是突出显示的，我正在使用此代码尝试从 eventListener 中获取反应，但它似乎没有激活。

const form = document.getElementsByClassName("search-inner");
if(form != null && form.length > 0){
    form[0].addEventListener('onsubmit', run);
}

function run(event){
    console.log("hi");
    event.preventDefault();
}

该网站确实设置了表单，以便在提交后隐藏它，以防影响 onsubmit 事件处理程序。

Answer 1

将role属性添加到元素仅将其角色传达给辅助技术，告诉用户他们对元素行为的期望，并将其添加到文档大纲中。 它实际上并没有改变元素的行为。

这就是为什么我们应该尽可能依赖语义 HTML 元素。

如果<form>没有action属性，它很可能永远不会被提交，但它的控件会根据其他事件触发更改。 这在当今的响应式页面中很常见。

因此，如果您确实想要针对任何导致 DOM 更改的表单元素，它会变得复杂，因为大多数时候它们没有正确分组，既没有使用表单，也没有使用<fieldset> 。

根据您要实现的目标，您可以在表单中查找按钮并绑定到它们的点击事件。

// kind of selector you’d need to implement
form, [role="form"], [role="search"], fieldset {
  button, input[type="button"], input[type="submit"] {
  }
}

不幸的是，实际上不可能检查元素上注册的事件处理程序。

因此，正如@xOxxOm 所建议的那样，您还可以在文档级别监听change事件，也许可以作为额外的措施来查看表单内的按钮单击是否更改了某些内容。

---

顺便说一句，您示例中的表格无效，因为它缺少强制性的可访问名称。

此外，它是一个搜索表单，因此search角色可能更合适，它不需要名称，您也可以将其用于您的扩展程序。

示例应该是这样的

<div class="search-inner" role="form" aria-labelledby="search-legend">
  <fieldset>
    <legend id="search-legend">