How do I remove an event listener?

Question

Possible Duplicate:
JavaScript: remove event listener

I am attempting to remove some event listeners from a navigation, after a start button is clicked. I can't seem to get anything to fire.

Here is the code I'm using to do it:

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

startButton.addEventListener('click', function() {
    hrNav.removeEventListener('mousedown', highlight, false);
    alert('Did it remove the listener?');
}, false);

The eventlistener that I'm trying to remove is:

if(hrNav.addEventListener){  
    hrNav.addEventListener('mousedown', highlight, false);  
    return true;  
} else {  
    hrNav.attachEvent('on'+'click', highlight);  
    return true;  
}

All of it is wrapped in a jQuery document.ready function.

What makes you think `removeEventListener` *doesn't* remove event listeners? — David G, Sep 17 '12 at 23:03
@David I think the problem is that the `startButton`'s eventListener isn't firing. — Jeffrey Sweeney, Sep 17 '12 at 23:05
This all works perfectly fine in this fiddle: http://jsfiddle.net/FranWahl/MmFb2/ You are going to have to do some digging , using `console.log()` messages in your code to check your objects and selectors. — Nope, Sep 17 '12 at 23:11
If you're using jQuery's document.ready function, then why aren't you using jQuery's events? — Brandon Boone, Sep 17 '12 at 23:22

score 0 · Answer 1 · answered Sep 17 '12 at 23:31

0

Since you said you're using jQuery. Try something like this: http://jsfiddle.net/MmFb2/4/

JS

$(function(){
    var startButton = $('#startButton');
    var hrNav = $('#hrNav');

    startButton.bind('click', function() {
        hrNav.unbind('click');
    }); 

    var toggle = false; 
    hrNav.bind('click', function(){
        var ele = $(this); 
        if(toggle){
            ele.css('background-color', '');
        }else{            
            ele.css('background-color', 'yellow');
        }
        toggle = !toggle;
    });
});

HTML

<input id="startButton" type="button" value='click to disable' />
<div id="hrNav">Click me to highlight</div>

answered Sep 17 '12 at 23:31

Brandon Boone

16,281
4
73
100

Is "unbind" the same thing as removing the event listener I previously set? – mdance Sep 18 '12 at 00:20
Yes, it's jQuery's abstraction of that action. Instead of having to account for all the idiosyncrasies specific to a particular browser. jQuery creates a single point of entry to abstract away all those differences allowing the developer to focus on the task at hand and not how to accomplish it in IE6-10, Firefox, Chrome, Opera, Safari, etc. This is not only true with event binding/unbinding, but also with DOM manipulation and DOM element retrieval. Well worth your investment in my opinion. – Brandon Boone Sep 18 '12 at 01:16

How do I remove an event listener?

1 Answers1