Can't remove keydown event listener programtically

Question

The CTRL + e combination on is quite annoying, I'm need to remove the keydown handler.

From chrome the event listener is on textarea:

So I created a script and tested it in devtools:

Array.from(document.querySelectorAll("textarea")).forEach(e => {
    const ev = getEventListeners(e)
    if (ev['keydown']) {
        console.log(ev['keydown'])
        ev['keydown'].forEach((row) => {
            e.removeEventListener('keydown', row.listener, false)
        })
    }
})

But the event listener is still there, what was wrong?

EDIT

As @wahoowa suggested, this worked partially, CTRL + E no longer creates the backtick on github.

But it doesn't do the default action on Mac as well. The default action is to jump to the end of line, how can I do the default behavior when CTRL + E is pressed?

document.querySelectorAll("textarea").forEach(e => {
    e.addEventListener("keydown", ev => {
        if (ev.key == 'e' && ev.ctrlKey) {
            ev.preventDefault();
            ev.stopPropagation();
        }
    })
})

Maybe, you could try a Hard refresh. To do that, press the key combo `ctrl + F5` — Sai Suman Chitturi, Jan 18 '22 at 06:42
probably because the event is attached to a parent element, as shown in the screenshot no keydown event is attached directly to the textarea (most are in the document) — sney2002, Jan 18 '22 at 07:03
@sney2002 I've changed the selector query to `*`, which will remove all event listeners, but still didn't work — daisy, Jan 18 '22 at 07:32
@daisy that returns all document descendants, but the event seems to be attached to the document itself, and * doesn't include "document" as you can test with `Array.from(document.querySelectorAll("*")).find(element=>element===document)`. you must remove the event directly from document — sney2002, Jan 19 '22 at 03:57

score 1 · Accepted Answer · answered Jan 18 '22 at 16:16

Instead of removing it, you could add an event listener to all textarea elements to prevent the default behavior and also stop propagation of the event to parent elements.

document.querySelectorAll("textarea").forEach(e => {
    e.addEventListener("keydown", ev => {
        ev.preventDefault();
        ev.stopPropagation();
    })
})

Note that this is solution to your scenario, but it does not answer your initial question of how to remove an event listener. If there were other keydown event listeners added to the textarea elements, those would not be removed. In order to actually remove the event listeners, you can look at these other questions:

Can't remove keydown event listener programtically

1 Answers1