how to make div click-able?

<div><span>shanghai</span><span>male</span></div>

For div like above,when mouse on,it should become cursor:pointer,and when clicked,fire a

javascript function,how to do that job?

EDIT: and how to change the background color of div when mouse is on?

EDIT AGAIN:how to make the first span's width=120px?Seems not working in firefox

Give it an ID like "something", then:

var something = document.getElementById('something');

something.style.cursor = 'pointer';
something.onclick = function() {
    // do something...
};

Changing the background color (as per your updated question):

something.onmouseover = function() {
    this.style.backgroundColor = 'red';
};
something.onmouseout = function() {
    this.style.backgroundColor = '';
};

<div style="cursor: pointer;" onclick="theFunction()">

is the simplest thing that works.

Of course in the final solution you should separate the markup from styling (css) and behavior (javascript) - read on it on a list apart for good practices on not just solving this particular problem but in markup design in general.