Handling Events - jpjohnsonjr/learning-notes GitHub Wiki

Intro

One common type of event is the "on*" event, i.e., onclick (perform this event upon receiving mouseclick); onkeydown (perform this event upon receiving keystroke); onblur (perform this event when focus is moved away).

Also, consoling this will reveal that the function is pointing to the window object because it is being executed in the global context.

Unobtrusive Event Binding

So called because the HTML document doesn't really need to know anything about the javascript. The following code is then inserted in the Javascript:

document.querySelector("button")
  .addEventListener("click", sayHello);

In this case, the this function will point to the button and not to the Window object. While this may seem like a more complex way of performing this task, it provides a bit more flexibility. For example, the content of the button can be changed upon click.

In index.html page, <script> element can be moved to the <head> element instead of the end of the page.

Following can be added to beginning of the Javascript and definitions added inside it:

document.addEventListener("DOMContentLoaded",
  function (event) { }
);
⚠️ **GitHub.com Fallback** ⚠️