在Javascript中转发事件

时间:2012-05-14 16:25:21

标签: javascript events

是否有一种简单的方法可以在Javascript中“转发”某个事件?我的最终目标是以下列方式增强UI响应能力:我有一个网站,其中包含一个输入文本字段,用于向后端数据库提交查询。如果用户在输入字段未对焦时按下某个键,我想在文档级别捕获按键事件,并将其转发到输入字段。 (这似乎是增强用户界面响应能力的一种相当常见的方法,例如,Google会在主要搜索网站上执行此操作。)

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

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

我试图像这样转发事件:

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

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

现在,忽略addEventListenerdispatchEvent的跨浏览器问题,这甚至不适用于支持这两种功能的Firefox。 Javascript解释器抛出异常:Error: uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIDOMEventTarget.dispatchEvent]"

那么,甚至可以转发这样的事件吗?或者我是否需要使用initKeyEvent创建一个新事件,然后将该事件分派给输入元素?

3 个答案:

答案 0 :(得分:2)

以下是键盘事件的示例:

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'),然后调度到 input 元素。是的,它有点复杂和错综复杂,但它有效;)

更多信息:

  1. Create Event
  2. Event initKeyEvent

答案 1 :(得分: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事件对于chararcter输入是不可复制的,因此聚焦输入将足够onkeydown - 该字符将出现在keyup上。

答案 2 :(得分:1)

跟进@ Bergi的回答,对我有用的解决方案就是简单地重定向focus - 这样事件将会发送到你想要的地方!例如:

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

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