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.
Reset
Reset
Reset
Reset
Reset