is there an "onAnything" javascript event?
have dumb question.
Here I've got three events calling the same function, connected to the same <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' == eT开发者_Python百科ype ) {
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>
I have onClick='', onMouseOver='', and onMouseOut='', all connected to the same <div>, and all calling the same function. If I want to add an event, I have to add an onEventThingy='' and call the same universal action handler function above. Inside the function, it decides what kind of event (event.type) and takes action.
Is there an onAnything='' event that I can use to call the universal function for any event which may happen to that <div>?
Instead of all those onevent attributes (which should be avoided anyway), you could set the onevent properties on the DOM element like so:
div.onclick = div.onmouseover = div.onmouseout = universal_action_handler;
where div is a reference to your DIV element.
Btw this is how I would implement the handler:
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 = '';
}
}
Live demo: http://jsfiddle.net/rPVUW/
No, there is no universal event.
You can try what Šime Vidas suggested, or some libraries (e.g., jQuery) allow you to bind multiple events to the same handler with a single line of code, but either way you do need to explicitly list out the events to be bound.
No, there's no way to attach the same handler to all possible events. Is that really what you want? This could lead to your handler containing a huge if..else block or big switch statement.
If you want to attach common functionality (logging in your example) to all event handlers, consider this 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);
}
Which you'd use like this:
<div onclick="logAndHandle(event, yourClickHandler);"
onmouseover="logAndHandle(event, yourMouseOverHandler);"
onmouseout="logAndHandle(event, yourMouseOutHandler)">Click me!</div>
Given that you seem to want some functionality to run for all events, and other functionality to be specific to particular events, I'd combine Jacob's answer with Šime Vidas's:
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);
};
};
And use it thus:
div.onclick = log(yourClickHandler);
div.onmouseover = log(yourMouseOverHandler);
div.onmouseout = log(yourMouseOutHandler);
Currying the log function makes it very easy to compose future "all event" functionality:
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));
Anyway, if you want to do functional-style programming in Javascript, you'd also want to look at Function.apply and Function.call.
Using just javascript, no, there is no 'onAnything' attribute. If you have the ability to add jQuery, you can 'bind' multiple events to the same div and then run the same function.
加载中,请稍侯......
精彩评论