40

我试图区分JavaScript 中keydown, keypress, keyup, input,change事件的不同用法。

如果是 JavaScript 自动补全搜索框，是不是一定要使用input事件处理程序？

原因是：

  1. 在change用户按下 Enter 或离开该输入框（通过 Tab 键或单击输入框外部）之前，不会调用事件处理程序，因此change当用户再输入一个时，该事件可能不适合提出建议的目的字符到输入框。

  2. 事件处理程序可用于将keydown击键“添加”到搜索词中，但是对于 CTRL-v 或 CMD-v（在 Mac 上）来粘贴它，如果我们粘贴这样的词，我们无法真正得到keyCode一个就像hello在搜索框中一样——因为只有一个按键用于 CTRL，一个按键用于v, 而不是hello——但是我们可以使用输入框的value属性来获取值——但是，如果用户使用鼠标来右键单击并选择“粘贴”以将文本添加到框 - 在这种情况下我们应该，或者我们可以使用鼠标事件处理程序来查看value属性？处理这么低级别的键盘和鼠标实在是太乱了。

所以input事件处理程序似乎恰好符合确切的目的，因为任何值更改，input都会调用事件处理程序。这就是input事件处理程序如此重要和有用的原因。

我们仍然需要keydown事件处理程序，因为如果用户按下向下箭头键在可能的项目列表中向下移动怎么办？（可能还有 ESC 使自动完成建议框消失）。在这些情况下，不会调用事件input处理程序和事件处理程序，并且事件对这些情况很有用。changekeydown

上述概念是否正确，主要是为了理解input事件？

（用于理解事件处理程序被称为的 jsfiddle：http: //jsfiddle.net/jYsjs/）

4

1 回答 1

62

你基本上是对的，这里详细介绍了事件和潜在的输入案例。

JavaScript 事件

这是触发不同事件的时间：

  • change

    blur如果 的值<input>已更改，则在触发事件时将调用此方法。换句话说，它会在输入失去焦点并且值与原来不同时触发。

  • input

    该input事件基本上是您要查找的所有内容，它捕获任何输入更改时的事件，并且很可能是由于开发监视每次击键的东西时令人头疼的原因而发生的。输入事件甚至设法捕捉到鼠标粘贴内容的情况。

    不幸的是，该input事件相对较新，仅适用于现代浏览器 (IE9+)。

  • keydown

    该keydown事件非常简单，当用户按下按键时触发。

  • keypress

    该keypress事件应该代表正在输入的字符。因此，它不会捕获退格或删除，这会立即将其关闭以供使用 over keydown。

  • keyup

    很像keydown，只要用户释放一个键，它就会触发。

  • paste

    当数据被粘贴到元素中时，这个方便的事件会触发。

修饰键

请注意keydown,keypress并在属性中分别keyup携带有关修饰键Ctrl,Shift和的信息 ,和。AltctrlKeyshiftKeyaltKey

案例

以下是您需要考虑的案例列表：

  • 使用键盘输入（包括按住一个键）

    触发器：keydown, keypress, input,keyup

  • 删除输入 ( Backspace/ Delete)

    触发器：keydown, input,keyup

  • Ctrl使用+粘贴V

    触发器：keydown, paste, input,keyup

  • 使用鼠标粘贴

    触发器：paste,input

  • 从自动完成中选择一个项目（↑</kbd>/↓</kbd>)

    触发器：keydown,keyup

执行

鉴于上述情况，您可以实现自动完成框来处理对input输入的所有更改的事件，然后keydown处理向上和向下的事件。这真的会很好地分离所有内容并产生一些非常干净的代码。

如果要支持 IE8，则需要将除粘贴之外的所有内容都扔到keydown事件中，然后处理paste. 该paste事件现在得到了相当广泛的支持，并且自 v5.5 以来一直在 IE中）。

试验事件

这是我用来测试事件的 jsFiddle ，您可能会发现它很有用。它显示了有关每个事件的更多信息：

function logEvent(e) {
    console.log(e.type +
                "\n    this.value = '" + this.value + "'" +
                (e.keyCode ? "\n    e.keyCode  = '" + e.keyCode + "'" : "") +
                (e.keyCode ? "\n    char       = '" + String.fromCharCode(e.keyCode) + "'" : ""));
    console.log(e);
}

参考

于 2013-03-31T08:51:51.673 回答