onkeydown不工作，onblur工作

Question

When I create a text box (input5) dynamically the next function works

input5.onblur = function() {validate_quantity(this)}

but the next one, doesnt work

input5.onkeydown = function() {validateNumbers(event)}

When I load the page, I have a first text box in html, with

onblur="validate_quantity" onkeydown="validateNumbers(event)

and BOTH work nice in this first text box, whats wrong with my input5.onkeydown line?

Answer 1

The code you're showing is for highly deprecated JS trigger handling. It's how we did event handling back in the HTML4.01 (1998) era, but it's not how you do event handling in modern HTML and JS.

The modern approach is to use event listening, using the addEventListener (and removeEventListener ) functions in a bit of page script (loaded just before </body> so that any elements that need to be found via document.getElementById or document.querySelector can be found):

var userInput = document.getElementById("userinput");

function dataHandler(evt) {
  var quantity = userInput.value;
  if (validateQuantity(quantity)) {
    // do things
  }
}

userInput.addEventListener("blur", dataHandler);
userInput.addEventListener("keydown", dataHandler);