输入焦点时运行函数的Javascript答案

【问题标题】：Javascript to run a function when input focus输入焦点时运行函数的Javascript
【发布时间】：2012-11-04 08:52:17
【问题描述】：

当用户在输入框（焦点）内单击时，运行函数的代码是什么，称为“myfunction”。

我在 jquery 中看到过示例，但我看不到如何使用直接的 javascript 来实现。

【问题讨论】：

w3schools.com/jsref/event_onfocus.asp
非 w3fools 文档：developer.mozilla.org/en-US/docs/DOM/element.onfocus 另外，对于类似element.addEventListener：developer.mozilla.org/en-US/docs/Mozilla_event_reference/…
呃，我的链接有点乱，评论 just 超过了编辑时间：developer.mozilla.org/en-US/docs/Mozilla_event_reference/…
@zerkms - 就信息的准确性而言，w3schools 比以前要好得多，但从历史上看它有很多问题。我不会反对它的过去，但我不喜欢的是它暗示了与 w3c 的关联，而它实际上并没有，并且 它会为无用的认证收费 - 两者就我而言，其中属于“欺诈”类别。我不像这些人那样强烈反对他们：w3fools.com - 但我仍然不会推荐他们。
@JamesWillson 哪个回答取决于您的要求 - 它们各有优势。我知道我会选择哪一个，但这不是我要说的；）#1 很简单/轻量级，所以如果你想要一个小的 js 占用空间很好，但不支持 IE8 和低于 #2 是可以的你正在做一个单独的小项目，而且很容易理解 #3 庞大而复杂，但很灵活，应该涵盖大多数情况。

【解决方案1】：

使用 onfocus 属性

<input type="text" onfocus="someFunc()">

<script>
  function someFunc(){

  }
</script>

【讨论】：

必须内联JS事件attach吗？ )
作为将来的说明：虽然这是一种简单的方法 - 对小型项目也很好 - 但由于很多不同的原因不建议这样做。 1）您正在混合代码和标记，这不利于未来的验证和可扩展性 2）将 js 直接附加为元素的属性更容易发生内存泄漏 3）您只能为每种事件类型应用一个事件侦听器 4）对标记不利提高可读性 5) 作为 XSS 保护的一部分，您应该从标记中剥离所有这些类型的属性 6) 事件管理和预防在代码方面更令人头疼。
@pebbl：关于 XSS 的第 5 条在这里是 100% 不相关的，你甚至不知道这个 html/js 是否不是完全静态的。
@zerkms imo 这与可能找到这个问题和答案的未来人们无关，这就是 StackOverflow 的主要内容，我想？这也是反对在这个答案中使用该方法的一点，这就是我陈述它的原因。我发现尽可能多地提供信息点是有用的 - 以帮助他人 - 而不是将它们保存起来以解决一个严格的问题。
@pebbl：那么您的解决方案也会受到 XSS 的影响。例如 addEvent(document.getElementById('your_input') - your_input 可以从运行时获取。所以这是一个可能的漏洞。根据您的策略，您还应该提到您的代码也可能不安全，对吗？现在看起来你在责备其他人的解决方案，尽管你的解决方案可能有同样的问题。

【解决方案2】：

var addEvent = (function(){
  /// addEventListener works for all modern browsers
  if ( window.addEventListener ) {
    /// I'm returning a closure after the choice on which method to use
    /// has been made, so as not to waste time doing it for each event added.
    return function(elm, eventName, listener, useCapture){
      return elm.addEventListener(eventName,listener,useCapture||false);
    };
  }
  /// attachEvent works for Internet Explorer
  else if ( window.attachEvent ) {
    return function(elm, eventName, listener){
      /// IE expects the eventName to be onclick, onfocus, onkeydown (and so on)
      /// rather than just click, focus, keydown as the other browsers do.
      return elm.attachEvent('on'+eventName,listener);
    };
  }
})();

使用上面的跨浏览器功能，您可以执行以下操作（一旦 dom 完全加载）：

addEvent(document.getElementById('your_input'),'focus',function(e){
  var input = e.target || e.srcElement;
  alert('this input has gained focus!');
});

【讨论】：

虽然我很欣赏这一点，但它让我想起了需要另一个 else 分支的时候 - 对于不支持 attachEvent 的一些浏览器。
@raina77ow 并且当我们深入未来时，您无疑会想起类似的事件；）不幸的是，这是尽责的 Web 开发人员的诅咒。然而，当前的“现代”浏览器在遵循规范方面做得比以前好得多……所以它发生的频率较低。总有一天我们可能会忘记 IE8，但目前还没有 imo..
当然，你是对的。 ) 我的观点（我不得不承认，这更像是咆哮）是有点……不寻常的看到干净的 JS 提供跨浏览器 - 因为这个功能应该已经在开发人员的工具包中。但是话又说回来，这个开发人员显然刚刚开始填补这个，所以......忽略这个评论。 )

【解决方案3】：

document.getElementById("elementId").addEventListener("focus",function(e){
 //Do Something here
});

【讨论】：

可能会让你大吃一惊，但输入无需点击即可获得焦点。
是的，挂钩“焦点”事件会是更好的选择。