什么对象可以触发 DOM 中的按键事件？答案

【问题标题】：What objects can trigger the key press event in the DOM?什么对象可以触发 DOM 中的按键事件？
【发布时间】：2013-12-02 01:16:50
【问题描述】：

我一直在尝试，似乎只有表单元素和窗口对象可以触发按键事件。

我检查了 MDN 文档和规范，但找不到任何列出可以触发此事件的有效对象的地方。在下面的代码示例中，如果我注释掉以“window”开头的行，那么我不会收到控制台消息，这意味着 div 元素没有触发按键事件，但是，如果我留在该行中为窗口上的按键事件，然后我确实看到了控制台消息。

谁能给我指出一些东西（或确认/列出）可以触发按键事件的有效对象？谢谢！

window.onload = function() {
    var div = document.getElementById("div");
    div.onclick = clickMeHandler;
    div.onkeypress = clickMeHandler;
    window.onkeypress = clickMeHandler;
};
function clickMeHandler(e) {
    console.log("click me handler, type: ", e.type);
    console.log("click me handler, target: ", e.target);
}

【问题讨论】：

w3.org/2010/04/xhtml10-strict.html 或学习阅读 DTD：w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd 以及带有 ATTLIST %attrs 或 ATTLIST %events 的任何内容
感谢 zamnuts，我正在查看 DOM 事件规范和 HTML5。欣赏这些链接。

标签： javascript html events

【解决方案1】：

尚未获得 keypress 适用的元素的完整列表，但我相信您是正确的 - 只有控件才是 keypress 有意义的 - 拥有它。以你的例子 - DIV 可以有按键事件，但只有当你可以实际输入内容时，即当它具有属性集contenteditable="true"

演示：http://jsfiddle.net/qny4A/

更新

其实我是正确的。我相信几乎任何元素都可以生成按键事件，只要它可以接收焦点，这可以通过“tabindex”属性实现

这是一个 SPAN 的演示，它在焦点对准时生成事件：http://jsfiddle.net/qny4A/1/

【讨论】：

啊，有道理。我没有考虑通过标签索引来聚焦。非常感谢！

【解决方案2】：

编辑：解释后添加了 HTML5 注释。

以下标签具有与之关联的任何 on* 事件（即 onkeypress）（按字母顺序列出）：

a, abbr, acronym, address, area, b, bdo, big, blockquote, body, button, caption, cite, code, col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset , form, h1, h2, h3, h4, h5, h6, hr, i, img, input, ins, kbd, label, legend, li, link, map, noscript, object, ol, optgroup, option, p, pre , q, samp, select, small, span, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, ul, var

以下标签没有有任何on*事件：

base、br、head、html、meta、param、脚本、样式、标题

根据XHTML 1.0 Strict DTD。元素的属性列表包含attrs 或events 实体，例如（第二行）：

<!ATTLIST img
  %attrs;
  src         %URI;          #REQUIRED
  alt         %Text;         #REQUIRED
  longdesc    %URI;          #IMPLIED
  height      %Length;       #IMPLIED
  width       %Length;       #IMPLIED
  usemap      %URI;          #IMPLIED
  ismap       (ismap)        #IMPLIED
  >

分解如下...首先你的 onkeypress 事件在实体%events中定义：

<!ENTITY % events
 "onclick     %Script;       #IMPLIED
  ondblclick  %Script;       #IMPLIED
  onmousedown %Script;       #IMPLIED
  onmouseup   %Script;       #IMPLIED
  onmouseover %Script;       #IMPLIED
  onmousemove %Script;       #IMPLIED
  onmouseout  %Script;       #IMPLIED
  onkeypress  %Script;       #IMPLIED
  onkeydown   %Script;       #IMPLIED
  onkeyup     %Script;       #IMPLIED"
  >

然后在实体%attrs中被别名：

<!ENTITY % attrs "%coreattrs; %i18n; %events;">

这两个实体在 DTD 的其他任何地方都没有引用。然后搜索包含至少一个这些实体的任何 ATTLIST。

另一方面，HTML5 不是基于 SGML，它不能有 DTD；见Where is the HTML5 Document Type Definition?。因此，我对 XHTML 1.0 所做的分析不适用于 HTML5。

According to the HTML5 spec，任何和所有元素都可以应用事件：

[E]event 处理程序（及其相应的事件处理程序事件类型）...必须被所有 HTML 元素支持，作为事件处理程序内容属性和事件处理程序 IDL 属性；和 ... 必须被所有 Document 和 Window 对象支持，作为事件处理程序 IDL 属性。

在事件表中包含您的onkeypress 事件处理程序，事件类型为keypress。

理论上，任何事件都可以在任何element node (node type ELEMENT_NODE 1) 上运行，但我不会指望它在所有浏览器中使用。我会说坚持使用 XHTML 实现会更安全。

我使用以下 PHP 脚本来解析和编译列表：

<?php

$dtd = '/path/to/local/copy/of/xhtml1-strict.dtd';
$file = file_get_contents($dtd);

$match = '/(<!ATTLIST[^>]+%(attrs|events);[^>]*>)/i';
preg_match_all($match,$file,$matches);

$tags = array();
if ( isset($matches[0]) ) {
    foreach ( $matches[0] as $attlist ) {
        preg_match('/ATTLIST\s([^\s]+)\s/',$attlist,$tag);
        if ( isset($tag[1]) && $tag[1] ) {
            $tags[] = $tag[1];
        }
    }
}

sort($tags);

$element = '/<!ELEMENT\s([^\s]+)/i';
preg_match_all($element,$file,$elements);
$elements = $elements[1];
sort($elements);

echo 'Has Events: '.implode(', ',$tags);
echo "\n\n";
echo 'Missing Events: '.implode(', ',array_diff($elements,$tags));

?>

【讨论】：

@Elisabeth yw！我不知道您想要有关 HTML5 的信息，所以我添加了它（在答案的中间）。只是好奇，你在看什么规格？
我在看 DOM 事件规范！！
@Elisabeth 哪一个？ DOM 级别 1 没有事件规范，DOM level 2 does not have a spec for keyboard events 和 DOM level 3's keypress event is not encouraged ...hmm 那么它到底是在哪里定义的呢？也许我错过了介于 2 到 3 之间的中间 DOM 级别规范。
我今天刚刚在 DOM Level 3 规范中找到了这个方便的表格：w3.org/TR/2012/WD-DOM-Level-3-Events-20120614/#event-types-list。它将按键列为 Document 和 Element 目标类型的事件类型。我还读到它不被鼓励，但替代方案似乎还没有在浏览器中得到广泛支持，所以现在我要坚持下去。谢谢！！

【解决方案3】：

假设您谈论的是纯 JS，而不是 C# 或 VB 事件：

"onkeypress 属性可以在所有 HTML 元素中使用，除了：

<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>.

来源： http://www.w3schools.com/jsref/event_onkeypress.asp

【讨论】：

客户端是 C# 还是 VB？很想看到那个。 OP 也在谈论 keypress 事件。哦，w3schools 不是可靠的信息来源。
我见过 C# 与 ASP.net 的前端系统相关。我忽略了区分这两个事件：/