如何在 Javascript 中将事件连接到 HTML 元素？

Question

我很难找到跨浏览器兼容的、基于 Javascript 的方法来将函数附加到元素。看来微软（当然）再次有自己的做事方式，并且让这样做变得困难。基本上，我在 Javascript 中动态创建一个表，并将 TEXTAREA 元素添加到行中的单元格中。我需要向 TEXTAREA 的 onkeydown 添加一个函数，以便检查文本框的长度是否达到最大限制（不幸的是，TEXTAREA 元素不支持 MaxLength 属性）。

是否存在适用于 FF 和 IE6、IE7、IE8 和 IE9 的简单解决方案？

Answer 1

我建议您看一下 jQuery。一个例子是

$('textarea').keydown(function () { });

注意，在这个例子中，我将事件处理程序附加到每个文本区域。更好的方法是使用 css 类或其他更具体的选择来找到正确的文本区域。例如：

$('textarea.limitedlength').keydown(function () { });

另请注意，您应该在创建元素后执行此操作。如果您不想为计时而烦恼，请使用 live 函数，然后 jQuery 会将事件处理程序附加到任何新找到的元素。

$('textarea.limitedlength').live('keydown', function () { });

好处是任何跨浏览器问题都由框架处理。 （我不知道 keydown 事件有任何跨浏览器问题，但 jQuery 处理设置事件处理程序和选择正确元素方面的差异）。

正如 RobG 在他的回答中指出的那样，由于粘贴， keydown （和 keyup 事件）是不够的。另一种方法是计算并检查焦点何时从文本区域移除：

$('textarea.limitedlength').blur(function () { });

Answer 2

使用按键事件检查文本区域内容的问题在于，还有其他输入文本的方式，例如粘贴或拖动。许多人使用 setInterval 或 setTimeout 来检查内容并不时更新计数（例如 50 毫秒），但此类方法的计算效率可能较低。仅当文本区域具有焦点时，您才可以运行计时器。

还有 HTML5 input 事件类型，每当表单控件有输入时就会触发：

<textarea oninput="document.getElementById('msg').innerHTML = this.value.length;">
</textarea>
<div id="msg"></div>

但当然并非所有浏览器都支持该类型。

Answer 3

除非您需要附加多个事件侦听器，否则这种方法可以正常工作：

element.onkeydown = function(e)
{
    e = e || window.event;
    ...
}