jQuery(document).on("keydown",...) 有效，但不是 document.addEventListener("keydown",..

Posted 2023-05-09

【中文标题】jQuery(document).on("keydown",...) 有效，但不是 document.addEventListener("keydown",...)

【英文标题】：jQuery(document).on("keydown",...) works, but not document.addEventListener("keydown",...)

【发布时间】：2014-02-08 05:58:05

【问题描述】：

我想我应该看看我现在有多需要 jQuery。所以我开始替换

jQuery(document).on("keydown.", function(e)...)

与

document.addEventListener("keydown", function(e)...)

我认为这很容易，但令我惊讶的是，该事件不再被触发。为了稍微调查一下，我在控制台中输入了第二个版本。现在它起作用了。 ;-)

当然，这有点不切实际。我宁愿不必在控制台中输入它...

在代码中，事件侦听器是在对 DOM 进行一些更改（即添加一些内容）之后立即添加的。我想问题可能与此有关，但我不知道该怎么办。

有什么建议吗？

编辑：感谢大家的 cmets。在这种特殊情况下，最好摆脱 jQuery（但除此之外，当然使用 jQuery 也没问题）。

我应该说一些 DOM 元素是在页面加载很久之后添加的，所以 window.onload 等在这里没有用。

我也许还应该说我正在最新版本的 Chrome 中测试它，为此我对向后兼容性不感兴趣（在这种情况下它太复杂了，所以我刚刚放弃了它...... ;- ) )。

更新：有人要代码。这是我刚刚测试的一个示例：

    document.addEventListener("keydown.test", function(e)
        console.log("doc.addEL test keydown, e=", e)
    );

在 Chrome 开发工具中查看 html 元素的属性，我可以在那里看到事件侦听器（使用上面的代码）。它只是没有被解雇。似乎是时候再写一个错误报告了。 ;-)

【问题讨论】：

也许你的代码有错误，你应该发布它。

“我想我应该看看我现在有多需要 jQuery...” 你不需要需要 jQuery。你可能想要它。我当然愿意，我不会为重新发明所有实用程序功能而烦恼。在无数浏览器上进行测试；发现、解决浏览器不一致的细节并解决问题；在发布后的一两天内，在数千种不同的环境中主动测试新的浏览器版本；创建大量附加组件来做有用的事情......我的意思是......我有事情要做。 ;-)

在旧版浏览器 (IEattachEvent 和 addEventListener

尝试在window.onload = function() wrapper 中运行它。

@T.JCrowder 同意，32kb 用得当，而且使用 CDN 最有可能被缓存。

【参考方案1】：

我的错。我误读了现在可以使用标准语法删除事件处理程序的消息。他们可以，但语法是你将 event+handler 函数提供给 removeEventListener。

我在上面用于事件的语法“keydown.test”不是有效的语法（如果您不使用 jQuery）。

很抱歉浪费了您的时间。希望有人可以使用答案。