如何检测文本区域的任何更改？

我目前已将我的文本区域绑定到几个似乎有效的事件。然而，问题是事件重叠并触发多次，这反过来又使性能降低了太多。

我想要做的几乎是捕获文本区域的任何更改：单击、粘贴、keyup、keydown、右键单击上下文菜单编辑（右键单击、剪切/删除/粘贴）、拖放等。这必须跨域工作- 浏览器至少低至 IE8。当您使用箭头键或类似键在文本区域中移动插入符号时，必须触发事件（我根据插入符号位置等处理更改）。

我不能使用任何重大延误。一旦您对文本区域执行某些操作，事件就必须立即触发并执行我在那里的任何代码。

我目前正在使用 jQuery 来绑定事件，但我对纯 JavaScript 解决方案很满意，只要它可以跨浏览器工作并执行我想要的操作。

这是我当前使用的代码：

var deadKeycodes = [16, 17, 18, 19, 20, 
                    27, 33, 34, 35, 36,
                    38, 40, 44, //37 = left arrow and 39 = right arrow removed, it needs to trigger on those
                    45, 112, 113, 114, 115,
                    116, 117, 118, 119, 120,
                    121, 122, 123, 144, 145];

$(original).bind('propertychange keyup keydown input click', function(e) { 
    if (!Array.prototype.indexOf || deadKeycodes.indexOf(e.keyCode) == -1) { // prevent execution when pressing a 'dead' key
         //do stuff here
    }
});

如果有任何不清楚的地方，请询问，我会为您澄清:)

我认为您无法真正“解决”问题，即阻止多个事件触发。 Keyup 和 Keydown 实际上是不同的事件并且发生在不同的时间。如果您想对这两个事件做出响应（您可能会这样做，因为按下键和向上键都可能会更改文本区域），则需要包含这两个事件。然而，大多数时候它们几乎会同时触发（并且连续多次），正如您所指出的，这可能会造成性能问题。

相反，你可能应该考虑解雇节流 or 去抖打回来。受限制的回调只会每隔一次触发一次n毫秒（适用于可能被调用过多的函数）。去抖回调仅在事件流完成后才会触发；后n自上次回调以来已经过去了几毫秒。

您可以使用下划线轻松完成此操作debounce http://underscorejs.org/#debounce and throttle http://underscorejs.org/#throttle功能。

就像是：

debouncedFn = _.debounce(function(e) { 
    if (!Array.prototype.indexOf || deadKeycodes.indexOf(e.keyCode) == -1) { // prevent execution when pressing a 'dead' key
         //do stuff here
    }
}, 100);

$(original).bind('propertychange keyup keydown input click', debouncedFn);