how to remove events from DOM element using javascript?

Hi,

I want to remove onmouseover and onmouseout events from my td element. I tried a search from Google and found that I have to use something like...
getElementById("nameofelement").removeEventListener or detachEvent. Well, I tried both of them but it did not work. Any ideas whats wrong?

function reserve(elem){
    elem.style.backgroundColor = "#99FF00";
    elem.innerHTML = "Your Reservation";
    elem.onclick = "unreserve(this)";
    //the lines below need fixing
    elem.onmouseover = "";
    elem.onmouseout = "";
}
.
.
<td onclick="reserve(this)" onmouseover="foo()" onmouseout="bar()"> abc </td>

Code (markup):

 

If the events are assigned on the actual HTML itself, you'll nullify what's known as the Legacy events.

// Delete
delete reference_to_elm.onmouseover;

// Or, nulliing
reference_to_elm.onmouseover = null;

// Or, with an empty function
reference_to_elm.onmouseover = new Function();

Code (markup):

Setting an attribute to an empty string generally reverts it to the original value set through the HTML when the page loads.

 

thank you.
Now I have another problem, can you help please?

So, I have 2 functions: reserve() and unreserve().. here's the code

function reserve(elem){
    //change the appearance of the element                                                                                          
    elem.style.backgroundColor = "#99FF00";
    elem.innerHTML = "Your Reservation";
    elem.onclick = "unreserve(this)";
    elem.onmouseout = "this.style.cursor = 'default'; this.style.backgroundColor = '#99FF00' ";
}

function unreserve(elem){
    elem.style.backgroundColor = "white";
    elem.innerHTML = "";
    elem.onclick = "reserve(this)";
    elem.onmouseout = "this.style.cursor = 'default'; this.style.backgroundColor = 'white' ";
}

.
.
.

<td onclick = "reserve(this);" onmouseover ="overHandler(this)" onmouseout="outHandler(this)"> abc </td>

Code (markup):

I wonder why doesnt the onclick, onmouseover and onmouseout events change like I want it to?
e.g if I click td elem, I want onclick event to become unreserve() and onmouseover,onmouseout to change like what I wrote there...

Thanks

 

elem.onclick = function(){
   unreserve(this);
}

Code (markup):