Multiple mouseover events per element [duplicate]

This question already has an answer here:

• Calling two functions on same click event with d3.js 1 answer

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
});