Как удалить прослушиватель событий из элемента DOM?

Question

Я бы хотел, чтобы добавить/удалить прослушиватели событий при нажатии. Может ли кто-нибудь указать, как я могу улучшить свой код?

Я прочитал несколько ответов на Stackoverflow, но ни один из них не помог мне.

Это обучающий инструмент, в котором наведение указателя на отображаемые числа приводит к тому, что центральный куб поворачивается для отображения того же номера.

Когда страница загружает прослушиватель событий, добавляется в центральный куб, и я написал немного jQuery, чтобы добавить слушателей в любой кубик с щелчком, чтобы они также отображали число, на которое наводится указатель.

Работает в Chrome, сортируется в Opera. FF думает, что его Сальвадор Дали и IE ... duh!

How it works at the moment

слушатель событий добавлен при загрузке страницы

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, чтобы добавить новый слушатель

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

Я уверен, что я не добавлять обработчики событий правильно и так, чтобы вызывает мою проблему, когда я читаю о других решениях.

Я не создал jsfiddle для этого сообщения, поскольку новое правило размещения всего соответствующего кода сделало бы это сообщение слишком большим. Если кто-то хотел бы увидеть его на jsfiddle, пожалуйста, спросите.

Built on this demo

--EDIT--

Я попытался добавить этот код, чтобы добавить класс rotate и если элемент имеет этот класс уже я удалить rotate и удалить прослушиватель событий. Он не удалит прослушиватель событий.

$('.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(); 
    } 
}); 

- Мое решение -

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

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

Answer 1

Вы можете использовать jQuery.on для добавления слушателей событий и jQuery.off, чтобы удалить их.

//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'); 

Вы можете использовать пространство имен событий, а также:

//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'); 

Таким образом, вы не запутались с другими обработчиками ..

Надеется, что это помогает ...