gpt4 book ai didi

javascript - 在 Javascript 中转发事件

转载 作者:搜寻专家 更新时间:2023-11-01 04:19:27 25 4
gpt4 key购买 nike

有没有一种简单的方法可以在 Javascript 中“转发”事件?我的最终目标是通过以下方式增强 UI 响应能力:我有一个带有单个输入文本字段的网站,该字段将查询提交到后端数据库。如果用户在输入字段未获得焦点时按下某个键,我想在文档级别捕获按键事件,并将其转发到输入字段。 (这似乎是增强 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 创建一个新事件,然后将该事件分派(dispatch)给输入元素?

最佳答案

这是一个键盘事件的例子:

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

关于javascript - 在 Javascript 中转发事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10587322/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com