8

是否有一种简单的方法可以在 Javascript 中“转发”事件？我的最终目标是通过以下方式增强 UI 响应能力：我有一个网站，其中包含向后端数据库提交查询的单个输入文本字段。如果用户在输入字段不在焦点时按下键，我想在文档级别捕获 keypress 事件，并将其转发到输入字段。（这似乎是增强 UI 响应能力的一种相当常见的方法，例如，谷歌在他们的主要搜索网站上就这样做了。）

所以我有一个这样的文本输入字段：

<input id="query" onkeydown="f(event)">

我尝试像这样转发事件：

function handler(ev)
{
    var query = document.getElementById("query");
    query.dispatchEvent(ev);
}

document.addEventListener("keydown", handler, false);

现在，忽略 和 的跨浏览器问题addEventListener，dispatchEvent这甚至在支持这两个功能的 Firefox 上都不起作用。Javascript 解释器抛出异常： Error: uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIDOMEventTarget.dispatchEvent]"

那么，甚至可以转发这样的事件吗？还是我需要创建一个新事件initKeyEvent，然后将该事件分派给输入元素？

4

3 回答 3

3

以下是键盘事件的示例：

HTML 文件 ( index.html ):

<!DOCTYPE html>
<html>
    <head>
        <title>Stackoverflow</title>
        <script type="text/javascript" src="sof.js"> </script>
    </head>
    <body>
        <input id="query" onkeydown="f(event);"/>
    </body>
</html>

Javascript 文件 ( sof.js ):

function simulateKeyDown () {
    // DOM Level 3 events
    var evt = document.createEvent ("KeyboardEvent");
    // DOM Level 3 events
    evt.initKeyboardEvent ("keydown", false, false, null, false, false, false, false, 0, 0);
    var query = document.getElementById ('query');
    query.dispatchEvent (evt);
}

window.onload = function () {
    document.addEventListener ('keydown', simulateKeyDown, false);
}

function f (ev) {
    console.log ('ciao');
}

如您所见，当窗口被加载时，它会为文档的keydown事件附加一个新的处理程序。当一个键被按下时，一个新的KeyboardEvent事件被创建，初始化（使用'keydown'），然后被分派到输入元素。是的，它有点复杂和复杂，但它很有效；）

欲了解更多信息：

  1. 创建活动
  2. 事件 initKeyEvent
于 2012-05-14T16:55:09.263 回答
1

我不确定转发，但我认为你不能。然而，我对最初问题的解决方案是

document.addEventListener("keydown", function(e) {
    if (e.target.oMatchesSelector("form *, fieldset *, input, textarea"))
        return; // Opera-specific, but I think you get the point of MatchesSelector
    if (e.metaKey || e.ctrlKey)
        return;
    if (e.keyCode < 46 || e.keyCode > 90)
        return;
    document.getElementById("query").focus();
}, false);

keydown 事件不适用于字符输入，因此聚焦输入就足够了 onkeydown - 字符将出现 onkeyup。

于 2012-05-14T16:37:50.367 回答
1

跟进@Bergi的回答，对我有用的解决方案是简单地重定向focus- 这样事件就会去你想要的地方！例如：

document.addEventListener('keydown', function(evt) {
    document.getElementById('query').focus();
}, false);

这会将所有 keydown 事件重定向到query元素。

于 2017-03-03T05:31:43.527 回答