javascript - 有没有办法在不添加事件的情况下对点击做出反应？

Question

我正在使用这个很棒的 Chrome 扩展Visual Event，它以可视方式显示附加到网站元素的 JS 事件。

使用它，我注意到似乎还有其他方法可以使用不是事件的 JavaScript 对点击做出反应？

例如，以下页面有一个用 JavaScript 编写的对话框，但 Visual Event 没有显示任何事件：

https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2014/accessible.html

查看源代码时，我看到它使用.addEventListener（一个普通的 JS 函数？）而不是.click（一个 jQuery 函数？）。我创建了一个包含两种变体的演示页面：

http://codepen.io/jmuheim/pen/jqBodO

但这似乎不是唯一的区别。因为当我使用像NVDA这样的屏幕阅读器时，它会宣布clickable对点击做出反应的元素 - 但它似乎在任何情况下都不会这样做。

在第一个示例（模态窗口）中，NVDA 根本没有说clickable：

在我的示例中，NVDA 宣布clickable了这两个元素：

所以我真的很困惑在 JavaScript 中点击时的不同反应方式，因为似乎至少有 3 种不同的类型：

一个 using .click，它总是由 NVDA 宣布clickable并由 Visual Event 显示
NVDA 宣布的一种.addEventListener用途（Visual Event 不显示）
NVDA 未宣布使用的一种.addEventListener（Visual Event 未显示）

谁能告诉我这里的区别？谢谢你。

score 0 · Accepted Answer

有几个问题，

实际上，在您的第一个示例中，没有任何单击事件绑定到表单。

它只是使用 htmlsubmit按钮来提交表单。以下是该演示的源代码。

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" class="input" placeholder="Gimmie ur Name">

    <label for="email">Email:</label>
    <input type="email" id="email" class="input" placeholder="Gimmie ur Email">

    <input type="submit" class="btn" value="Submit Form">
  </form>

这是来自 w3school 的表单示例代码。

.addEventListener并且.onclick是纯javascript函数。.click由 jQuery 定义。

来自 MDN 的 addEventListener

来自 MDN 的点击

.click 来自 Jquery

对于Visual Event和NVDA之间的差异，这就是 Visual Event 捕获您的事件的方式。（只点击？）

希望这能解决您的问题。