如何使一个元素在任何和所有事件上触发一个函数

Question

我认为对我的特定场景的解释在这里没有多大帮助。简而言之，我需要知道如何在任何和所有事件上调用函数。其思想是，无论特定元素发生什么事件，都要调用相同的函数。

在我看来，实现这一目标的理想方式是：

<div onAnyEvent="function()"></div>

而不是：

<div onClick="function()" onMouseover="function()" onKeypress="function()"></div>

Answer 1

我通过研究发现的最好的方法是为同一元素上的每个事件创建一个事件侦听器，如下所示：

window.onload = addListeners;
function addListeners(){
  if(window.addEventListener){
    document.getElementById('message').addEventListener('keydown',textarea_resize,false);
    document.getElementById('message').addEventListener('keyup',textarea_resize,false);
    document.getElementById('message').addEventListener('keypress',textarea_resize,false);
}

进一步解释：

addEventListener('event to listen to', function_to_be_called, useCapture-value)

第一个参数是要侦听的事件（即'click'或'keydown'）。

第二个是要调用的函数：（即validate_form）。

-您还可以将参数发送到函数中：validate_form(e, i)。

对于大多数用途，使用捕获的最后一个值通常设置为false，如果不指定任何值，则false是自动值。可以在这里获得进一步的解释！

所以一个完整的例子可能是：document.getElementById('message').addEventListener('keydown',textarea_resize,false);，正如我上面展示的。