如何从DOM元素中删除事件侦听器？

Question

I would like to toggle add/remove event listeners on click. Could someone point out how I could improve my code?

I've read a number of answers on Stackoverflow but none have helped me.

This is a learning tool where hovering the pointer over the displayed numbers makes the center cube rotate to display the same number.

When the page loads an event listener is added to the centre cube and I wrote a little jQuery to add listeners to any clicked cube so they will also show the number that the pointer hovers on.

Works in Chrome, sorta in Opera. FF thinks its Salvador Dali and IE... duh!

How it works at the moment

Event listener added on page load

var thisCube = '.two';
var init = function() {
  var box = document.querySelector(thisCube).children[0],
      showPanelButtons = document.querySelectorAll('#hover-change li'),
      panelClassName = 'show-front',

      hover = function( event ){
        box.removeClassName( panelClassName );
        panelClassName = event.target.className;
        box.addClassName( panelClassName );
      };

  for (var i=0, len = showPanelButtons.length; i < len; i++) {
    showPanelButtons[i].addEventListener( 'mouseover', hover, false);
  }

};

window.addEventListener( 'DOMContentLoaded', init, false);

jQuery to add new listener

$('.one, .three, .four, .five, .six, .seven, .eight, .nine').click(function() { 
    thisCube = $(this).data('id');
    init();
});

I'm sure I'm not adding the event listeners correctly and so that is causing my trouble when I read about other solutions.

I didn't build a jsfiddle for this post as the new rule of posting all relevant code would make this post far too large. If anyone would like to see it on jsfiddle please ask.

Built on this demo

--EDIT--

I tried adding this code to add a class rotate and if an element has that class already I remove rotate and remove the event listener. It wont remove the event listener.

$('.one, .two, .three, .four, .five, .six, .seven, .eight, .nine').on('click', function() {

    if($(this).hasClass('rotate'))
    {
        $(this).removeClass('rotate');
        alert('remove ' + $(this).attr("class"));
        $(this).off('click');
    } else {
        $(this).addClass('rotate');
        alert('add ' + $(this).attr("class")); 
        thisCube = $(this).data('id');
        init();
    }
});

-- My Solution --

$('.container').click(function(){
    $(this).toggleClass('rotate');
});

$('#hover-change').children().hover(function(){
    $('.rotate > #cube').removeClass();
    $('.rotate > #cube').addClass($(this).attr('class'));
},
function(){});

Answer 1

You can use jQuery.on to add event listeners and jQuery.off to remove them.

//Add
$('.one, .three, .four, .five, .six, .seven, .eight, .nine').on('click', function() { 
    thisCube = $(this).data('id');
    init();
});

// Remove
$('.one, .three, .four, .five, .six, .seven, .eight, .nine').off('click');

You can use Event Namespace as well:

//Add
    $('.one, .three, .four, .five, .six, .seven, .eight, .nine').on('click.MyNamespace', function() { 
        thisCube = $(this).data('id');
        init();
    });

// Remove
    $('.one, .three, .four, .five, .six, .seven, .eight, .nine').off('click.MyNamespace');

This way you don't mess with other handlers..

Hope it helps...