How can I remove a JavaScript event listener?

by

You need to use named functions.

Also, the click variable needs to be outside the handler to increment.

var click_count = 0;

function myClick(event) {
    click_count++;
    if(click_count == 50) {
       // to remove
       canvas.removeEventListener('click', myClick);
    }
}

// to add
canvas.addEventListener('click', myClick);

You could close around the click_counter variable like this:

var myClick = (function( click_count ) {
    var handler = function(event) {
        click_count++;
        if(click_count == 50) {
           // to remove
           canvas.removeEventListener('click', handler);
        }
    };
    return handler;
})( 0 );

// to add
canvas.addEventListener('click', myClick);

This way you can increment the counter across several elements.

If you don’t want that, and want each one to have its own counter, then do this:

var myClick = function( click_count ) {
    var handler = function(event) {
        click_count++;
        if(click_count == 50) {
           // to remove
           canvas.removeEventListener('click', handler);
        }
    };
    return handler;
};

// to add
canvas.addEventListener('click', myClick( 0 ));

More Related Contents:

  1. JavaScript: remove event listener
  2. Detecting Browser Autofill
  3. How can I capture the right-click event in JavaScript? [duplicate]
  4. Javascript event handler with parameters
  5. Removing event listener which was added with bind
  6. event.preventDefault() vs. return false (no jQuery)
  7. Accessing an object’s property from an event listener call in JavaScript
  8. How to pass event as argument to an inline event handler in JavaScript?
  9. jQuery equivalent of JavaScript’s addEventListener method
  10. How can I execute a function on pressing the enter key in an field?
  11. Are event handlers in JavaScript called in order?
  12. Handling “onclick” event with pure JavaScript
  13. How to unbind a specific event handler
  14. JavaScript add events cross-browser function implementation: use attachEvent/addEventListener vs inline events
  15. visibilitychange event is not triggered when switching program/window with ALT+TAB or clicking in taskbar
  16. Add multiple window.onload events
  17. How to find event listeners on a DOM node in JavaScript or in debugging?
  18. Definitive way to trigger keypress events with jQuery
  19. How can I trigger an onchange event manually? [duplicate]
  20. adding ‘click’ event listeners in loop [duplicate]
  21. How can I give keyboard focus to a DIV and attach keyboard event handlers to it?
  22. Add onclick event to newly added element in JavaScript
  23. Trigger an event with Prototype
  24. Capture click on div surrounding an iframe
  25. Change observable but don’t notify subscribers in knockout.js
  26. How to clone or re-dispatch DOM events?
  27. List all javascript events wired up on a page using jquery
  28. How to register multiple external listeners to the same selection in d3?
  29. Is there an equivalent to e.PageX position for ‘touchstart’ event as there is for click event?
  30. How to capture browser close event?

Leave a Comment