Multiple mouseover events per element

Question

I am visualizing a chat conversation where I append a bar per message representing message length. There is also another part of the interface for displaying statistics for each user in the chat.

GOAL: When a user hovers over a bar

1. highlight the bar (by changing from grey to some other color)
2. display data about the user who sent that message

So I wanted to do two mouseover events, one to highlight bar and the other to change the display, but it seems like only one mouseover event can be attached per element. How would I make both events fire?

// add highlighting event to each rectangle
rects.on('mouseover', function(thisData) {
    rects.filter(function(d) { return d['userId'] === thisData['userId']; })
         .style('fill', users[thisData['userId']]['color']);
});

// further down...

// change display when highlighting a rectangle
rects.on('mouseover', function(thisData) {
    display.text(thisData['message']); // just example code
});

Answer 1

you can create 2 functions and call them on mouseover event

rects.on('mouseover', function (thisData) {
    dosomething();
    dosomethingelse();
});

//define dosomething and dosomethingelse
function dosomething($var) {
    //sample code
}

function dosomethingelse() {

}

Answer 2

Just do all of the logic in one mouseover handler.

rects.on('mouseover', function(thisData) {
    rects.filter(function(d) { return d['userId'] === thisData['userId']; })
        .style('fill', users[thisData['userId']]['color']);
    display.text(thisData['message']);
});