为什么addEventListener不能用于Chrome中的单选按钮焦点事件？

Question

Consider the following example (also available here: http://jsfiddle.net/hq8Fg/1/ ). 请考虑以下示例（也可在此处获得： http ： //jsfiddle.net/hq8Fg/1/ ）。 It works fine in IE9, but doesn't work in Chrome 16. 它在IE9中工作正常，但在Chrome 16中不起作用。

In IE, if I click on the radio button, I see the message, but in Chrome nothing happens. 在IE中，如果我点击单选按钮，我会看到该消息，但在Chrome中没有任何反应。

<!DOCTYPE html>
<html>
<head>
<title>Nothing</title>
<script type="text/javascript">
  function begin() {
    var rb1 = document.getElementById('rb1');
    rb1.addEventListener('focus', function() { document.getElementById("theText").value = "focus"; }, false);
  }
</script>
</head>
<body onload="begin()">
    <input id="rb1" type="radio" />
    <textarea id="theText"></textarea>
</body>
</html>

Any idea why it's not working in Chrome and what I can do to fix it? 知道为什么它不能在Chrome中运行以及我可以做些什么来修复它？

ps I know I can probably use a library like JQuery, but I want to know if it's possible without using any libraries. ps我知道我可以使用像JQuery这样的库，但我想知道是否可以不使用任何库。

Answer 1

According to this less than stellar source , the focus event for a radio button is only supposed to fire when you tab into it, which you can see in your fiddle. 根据这个不太明星的来源，单选按钮的焦点事件只有当你勾选它时才会发射，你可以在你的小提琴中看到它。

I'll see if I can find some better documentation of this—MDN ideally. 我会看看我是否能够在理想情况下找到更好的MDN文档。

EDIT 编辑

From this MDN article 来自这篇MDN文章

Changing the focus 改变焦点

There are several ways to change the currently focused element. 有几种方法可以改变当前关注的元素。 The simplest is to call the focus method of a the XUL element that you wish to set the focus to. 最简单的方法是调用您希望将焦点设置为的XUL元素的焦点方法。 The blur method can be used to remove the focus from an element. 模糊方法可用于从元素中移除焦点。 The following example demonstrates this: 以下示例演示了这一点：

Example 5 : Source View 示例5：源视图

<button label="Focus" oncommand="document.getElementById('addr').focus()"/> Or, you can use the methods advanceFocus and rewindFocus on the command dispatcher. <button label="Focus" oncommand="document.getElementById('addr').focus()"/>或者，您可以在命令调度程序上使用方法advanceFocus和rewindFocus。 These methods move the focus to the next element in sequence or the previous element respectively. 这些方法分别将焦点移动到序列中的下一个元素或前一个元素。 This is what happens when the user presses TAB or Shift+Tab. 当用户按下TAB或Shift + Tab时会发生这种情况。

For textboxes, a special attribute, focused is added whenever the element has the focus. 对于文本框，只要元素具有焦点，就会添加一个特殊属性focus。 You can check for the presence of this attribute to determine if the element has the focus, either from a script or within a style sheet. 您可以检查是否存在此属性，以确定元素是否具有焦点，可以是脚本还是样式表。 It will have the value true if the textbox has the focus and, if the textbox does not have the focus, the attribute will not be present. 如果文本框具有焦点，则它将具有值true;如果文本框没有焦点，则该属性将不存在。

Suppose you wanted to move the focus from where it currently is, to the next place the browser thinks it should be. 假设您想将焦点从当前位置移动到浏览器认为它应该是的下一个位置。 A user typically does this by hitting the "Tab" key. 用户通常通过点击“Tab”键来完成此操作。 You can do this anywhere you have a XUL browser document by simply: 您可以通过以下方式在任何有XUL浏览器文档的地方执行此操作：

(emphasis mine) （强调我的）

Answer 2

You could try the onclick event since the problem isn't that the event is not called when the element gets focused; 您可以尝试onclick事件，因为问题不是在元素聚焦时不调用事件; The problem is that it is really not focused on click. 问题是它实际上并不专注于点击。 You can figure that out through focusing your textarea and then pressing SHIFT + Tab . 你可以通过聚焦textarea，然后按SHIFT + Tab来解决这个问题 。

Answer 3

As best I can tell, the focus event only fires for a radio button when the keyboard is used to navigate to a radio button. 我可以说，当键盘用于导航到单选按钮时，焦点事件仅触发单选按钮。 For clicking on the radio button, use the click event like this: http://jsfiddle.net/jfriend00/XatCv/ 要单击单选按钮，请使用以下单击事件： http ： //jsfiddle.net/jfriend00/XatCv/

为什么addEventListener不能用于Chrome中的单选按钮焦点事件？

问题描述

3 个解决方案

解决方案1
4 2012-01-03 16:09:33

解决方案2
2 已采纳 2012-01-03 16:10:11

解决方案3
1 2012-01-03 16:12:09

为什么addEventListener不能用于Chrome中的单选按钮焦点事件？

问题描述

3 个解决方案

解决方案1 4 2012-01-03 16:09:33

解决方案2 2 已采纳 2012-01-03 16:10:11

解决方案3 1 2012-01-03 16:12:09

解决方案1
4 2012-01-03 16:09:33

解决方案2
2 已采纳 2012-01-03 16:10:11

解决方案3
1 2012-01-03 16:12:09