CODEWITHSUNDEEP
javascript
Josquee
Josquee

Reputation: 85

JavaScript onkeydown / addeventlistener

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.

Upvotes: 2

Views: 2359

Answers (3)

Yash Chapaneri
Yash Chapaneri

Reputation: 40

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

Upvotes: 0

Shivam Singh
Shivam Singh

Reputation: 1731

[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].

Upvotes: 0

Ilijanovic
Ilijanovic

Reputation: 14904

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);

Upvotes: 5

Related Questions