Mouse Events of the W3C

Each box below has its unique event listener printed on it. When you trigger that listener, the additional classname demo is applied to that box. When you click the Reset link directly following it, that additional classname is removed. The only difference between div.target and div.target.demo is the deepness of the yellow color applied to it.

Note that the listeners only do one thing each. In order to have a complete mouseover effect, you need two listeners — one for the mouseover event and another for the mouseout event.

Mouseover

Reset

Mouseout

Reset

Mousedown

Reset

Mouseup

Reset

Click

Reset