JavaScript onkeydown / addeventlistener

user_4884817 0
Viewed 363

I don't know if this has been answered somewhere, but here it goes.

Why is this working?

el.onkeydown = function(e) {
  if(!((e.keyCode > 95 && e.keyCode < 106) || (e.keyCode > 47 && e.keyCode < 58) || e.keyCode == 8)) {
     return false;
  }
}

And this one not?

function negativeNum(e) {
  if(!((e.keyCode > 95 && e.keyCode < 106) || (e.keyCode > 47 && e.keyCode < 58) || e.keyCode == 8)) {
    return false;
  }
}

el.addEventListener('keydown', function () {
  negativeNum(event);
}, false);

Thanks.

javascript
3 Answers

It should work if you pass the callback argument to your function like this

el.addEventListener('keydown', function (event) {
   negativeNum(event);
}, false);

you can user your function as callback function like this:

 el.addEventListener('keydown', negativeNum, false);
user_109907370 
function negativeNum(e) {
  if(!((e.keyCode > 95 && e.keyCode < 106) || (e.keyCode > 47 && e.keyCode < 58) || e.keyCode == 8)) {
    e.preventDefault();
  }
}


el.addEventListener('keydown', negativeNum, false);

more on this here

user_81866710

[1] el.onkeydown = function (e) {}

an HTML object has a different event attached to it as its keys, by default el.onkeydown was null & later we had overwritten it by an fn, the fn here can return true / false

if you return false it's basically doing 3 things:

[A] event.preventDefault();
[B] event.stopPropagation();
[C] stops execution and returns immediately

[2] el.addEventListener('keydown', function () {})

Deep down in __proto__ of an HTML object, you can find addEventListener which takes a callback fn as the second param.

If you return anything from this callback fn the return value will be collected by the parent fn ie. addEventListener & will have no such effect as in [1].

user_73759610
Related