.addEventListener enquiry

Question

So this works:

$('#divID').addEventListener('click', function() {alert('hi');}, false);

However I'm trying to get this to work, but just couldn't

$('#divID').addEventListener('keypress', function(e) {
    e = event || window.event;
    if (e.keyCode == 40) {
        //do something when the down arrow key is pressed.
    }
}, false);

Please help, much appreciated.

I'm trying to control what happens when the down arrow key is pressed but it's only for that specific divID, not for the whole document.

http://stackoverflow.com/questions/3149362/capture-key-press-or-keydown-event-on-div-element — Nouphal.M, Feb 25 '16 at 13:57
*"So this works"* Um...it does? You sure? Pretty sure you'll find jQuery instances don't have an `addEventListener` method. — T.J. Crowder, Feb 25 '16 at 13:59
Why are you using `addEventListener` on a jQuery object? This should be throwing an error, so I'm not sure how it can possibly be working. Use `on()`, `click()` or `keypress()` instead — Rory McCrossan, Feb 25 '16 at 14:03
I'm using Pagepiling, which is one of the parallax scrolling plugin, each
forms a scrollable section. I just want to make sure I can enable the down key to do other things apart from just scrolling down to the next section. — Henry, Feb 25 '16 at 21:45
For instance, the way in which the former code has been working for me is that if given a specific section of #divID, when you click anywhere in that section, it appears that there is an alert message, now I just want to replicate that, but by pressing the down key. — Henry, Feb 25 '16 at 21:47

score 1 · Answer 1 · answered Feb 25 '16 at 13:59

1

KeyPress event is invoked only for character (printable) keys, KeyDown event is raised for all including nonprintable.

Also the behaviour varies from browser to browser.

answered Feb 25 '16 at 13:59

Vibhesh Kaul

2,593
1
21
38

Thanks for that advice, I'll keep in mind for the future – Henry Feb 26 '16 at 01:47

T.J. Crowder · Accepted Answer · 2016-02-26T06:23:06.903

You've tagged your question jquery, so I'll assume you are actually using it.

There are several issues there:

keypress is only triggered for printable characters. For arrow keys, you want keydown (usually) or keyup (rarely).
jQuery instances don't have an addEventListener method. You want on. (Or you could use the event-specific alias for the event you want to use.)
There is no third argument to the jQuery on method.
jQuery handles the issue of the event argument being passed by some handler mechanisms and not by others for you. It always gives you the argument.
Some browsers use keyCode, others use which. jQuery standardizes it for you as which.

So:

$('#divID').on('keydown', function(e) {
    if (e.which == 40) {
        //do something when the down arrow key is pressed.
    }
});

More: on, the event object

For the div to receive the keypress, on at least some browsers, it will need to either be or have interactive content (for instance, it would need to have an input in it, or be contenteditable, or similar).

Live Example with a contenteditable div

$('#divID').on('keydown', function(e) {
  if (e.which == 40) {
    //do something when the down arrow key is pressed.
    $("<p>").text("down arrow").appendTo(document.body);
    return false;
  }
});

<div id="divID" contenteditable>Click here to ensure the div has focus, then press the down arrow</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Alternately, capture the keydown event on document.body (or document):

Live Example with document.body:

$(document.body).on('keydown', function(e) {
  if (e.which == 40) {
    //do something when the down arrow key is pressed.
    $("<p>").text("down arrow").appendTo(document.body);
    return false;
  }
});

<div id="divID">Click here to ensure the document has focus, then press the down arrow</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Seems to have no effect when I put alert('hi'); //this doesn't show up. — Henry, Feb 26 '16 at 01:49
@Henry: For the `div` to receive the event, it needs to be interactive in some way (for instance, `contenteditable`). Or you can capture the keypress on `document.body` or `document` instead. I've added live examples to the answer. — T.J. Crowder, Feb 26 '16 at 06:24
Thank you very much for your time and help, however despite the fact that it's working on your code snippet, my code still doesn't work oddly. — Henry, Feb 26 '16 at 07:14
@Henry: If you update your question with a [mcve], we may be able to help you. Otherwise, there's nothing we can do. — T.J. Crowder, Feb 26 '16 at 07:24
Okay I'll update the post ASAP, thank you for being here to help me. — Henry, Feb 26 '16 at 08:37
Actually T.J. Crowder it seems that when I am reposting my code, the question appears to be different as I have changed the .addeventlistener to your suggestion of using .on — Henry, Feb 26 '16 at 09:13
I discovered that after I changed my code after your suggestion (it works to a certain extent) but the nature of the problem has changed. I'll accept this to be the correct answer. Thank you for your time and help T.J. Crowder. Upvoted! — Henry, Feb 26 '16 at 09:38

.addEventListener enquiry

2 Answers2