Question

有一个愚蠢的问题。

这里我有三个事件调用同一个函数，连接到同一个<div>：

<html>
<head>
<script type='text/javascript'>
function universal_action_handler( event ) {
  var eType = event.type;
  var eTarget = event.target || event.srcElement;
  console.log( "Captured Event, type=", eType, ", target=", eTarget );
  if( 'mouseover' == eType ) {
    console.info( "onMouseOver: set background color to red." );
    eTarget.style.backgroundColor = 'red';
    eTarget.style.fontSize = '';
  }
  if( 'mouseout' == eType ) {
    console.info( "onMouseOut: set background color to transparent." );
    eTarget.style.backgroundColor = 'transparent';
    eTarget.style.fontSize = '';
  }
  if( 'click' == eType ) {
    console.info( "click!" );
    eTarget.style.fontSize = 'larger';
  }
}
</script>
</head>
<body>

<div style='border: 1px dashed red; display: inline-block;'
 onClick="universal_action_handler(event);"
 onMouseOver="universal_action_handler(event);"
 onMouseOut="universal_action_handler(event);">Click me!</div>

</body>
</html>

我有onClick=''，onMouseOver=''和onMouseOut=''，都连接到同一个<div>，并且都调用相同的功能。如果我想添加一个事件，我必须添加onEventThingy=''并在上面调用相同的通用操作处理函数。在函数内部，它决定什么类型的事件（event.type）并采取行动。

我是否可以使用onAnything=''事件为<div>可能发生的任何事件调用通用函数？

Answer 1

而不是所有那些onevent属性（无论如何应该避免），您可以在DOM元素上设置onevent属性，如下所示：

div.onclick = div.onmouseover = div.onmouseout = universal_action_handler;

其中div是对DIV元素的引用。

顺便说一下，我是如何实现处理程序的：

function universal_action_handler ( e ) {
    var target, style;

    e = e || window.event;
    target = e.target || e.srcElement;
    style = target.style;

    if ( e.type === 'click' ) {
        style.fontSize = 'larger';
    } else {
        style.backgroundColor = e.type === 'mouseover' ? 'red' : 'transparent';
        style.fontSize = '';   
    }
}

现场演示： http://jsfiddle.net/rPVUW/

Answer 2

不，没有办法将相同的处理程序附加到所有可能的事件。这真的是你想要的吗？这可能会导致您的处理程序包含巨大的if..else块或大switch语句。

如果要将常用功能（记录在您的示例中）附加到所有事件处理程序，请考虑以下JavaScript：

function logAndHandle(event, innerHandler) {
    var eType = event.type;
    var eTarget = event.target || event.srcElement;
    console.log( "Captured Event, type=", eType, ", target=", eTarget );        
    return innerHandler(event);
}

您可以这样使用：

<div onclick="logAndHandle(event, yourClickHandler);"
     onmouseover="logAndHandle(event, yourMouseOverHandler);"
     onmouseout="logAndHandle(event, yourMouseOutHandler)">Click me!</div>

Answer 3

不，没有普遍的事件。

您可以尝试ŠimeVidas建议的内容，或者某些库（例如，jQuery）允许您使用单行代码将多个事件绑定到同一个处理程序，但无论哪种方式，您都需要明确列出要发生的事件界。

Answer 4

鉴于你似乎想要为所有事件运行某些功能，以及特定于特定事件的其他功能，我将雅各布的答案与ŠimeVidas的结合起来：

var log = function(innerHandler) {
    return function(event){
        var eType = event.type;
        var eTarget = event.target || event.srcElement;
        console.log( "Captured Event, type=", eType, ", target=", eTarget );
        return innerHandler(event);
    };
};

然后使用它：

div.onclick = log(yourClickHandler);
div.onmouseover = log(yourMouseOverHandler);
div.onmouseout = log(yourMouseOutHandler);

Currying log函数可以很容易地构成未来的“所有事件”功能：

var count = function(innerHandler){
    var totalCount = 0;
    return function(event){
        totalCount += 1;
        alert("I've been called " + totalCount + " times.");
        return innerHandler(event);
    };
};

div.onclick = count(log(yourClickHandler));

无论如何，如果您想在Javascript中进行功能式编程，您还需要查看Function.apply和Function.call。

Answer 5

仅使用javascript，不，没有'onAnything'属性。如果你能够添加jQuery，你可以将多个事件“绑定”到同一个div，然后运行相同的函数。

是否有“onAnything”javascript事件？

5 个答案: