remove event listener on a input in pure javascript

Question

I an attaching event listeners in input box by using ID. so its working fine but I want to remove event listeners its will not work for me.

document.getElementById("myInput").addEventListener("keyup", function({
    console.log(document.getElementById("myInput").value);
});


  document.getElementById("myInput").removeEventListener("keyup",function() {

});

a named function will help you here .. ! – semuzaboi Dec 17 '16 at 16:38 — semuzaboi, Dec 17 '16 at 16:38

score 5 · Answer 1 · answered Dec 17 '16 at 16:36

The second argument needs to be the event listener you want to remove (so you need to keep a reference to that function around instead of putting a function expression directly as the argument to addEventListener).

You're passing it a brand new function. It doesn't get removed, because that function wasn't listening in the first place.

var in = document.getElementById("myInput");

function myListener (event) {
    console.log(in.value);
}

in.addEventListener("keyup", myListener);
in.removeEventListener("keyup", myListener);

score 2 · Answer 2 · answered Dec 17 '16 at 16:37

2

Try that

var fn = function({
    console.log(document.getElementById("myInput").value);
}

document.getElementById("myInput").addEventListener("keyup", fn);
document.getElementById("myInput").removeEventListener("keyup", fn);

answered Dec 17 '16 at 16:37

Arthur

4,870
3
32
57

score 1 · Answer 3 · edited Dec 17 '16 at 16:46

var body =
        document.querySelector('body'),
    clickTarget =
        document.getElementById('click-target'),
    mouseOverTarget =
        document.getElementById('mouse-over-target'),
    toggle = false;

function makeBackgroundYellow() {
    'use strict';

    if (toggle) {
        body.style.backgroundColor = 'white';
    } else {
        body.style.backgroundColor = 'yellow';
    }

    toggle = !toggle;
}

clickTarget.addEventListener('click',
    makeBackgroundYellow,
    false
);

mouseOverTarget.addEventListener('mouseover', function () {
    'use strict';

    clickTarget.removeEventListener('click',
        makeBackgroundYellow,
        false
    );
});


target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[, useCapture]);

the second argument is the eventlistener you want to remove, see this

Your answer is good, but a little big for a small question. Add an additional "quick answer part" to explain the solution in 2-3 lines — Arthur, Dec 17 '16 at 17:25

remove event listener on a input in pure javascript

3 Answers3