將提交/提交事件處理程序附加到哪個元素？

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">