CSE 154

Lecture 10: More Events and Timers

Fixing Redundant Code with This

             Heuy
             Dewey
             Louie
          

HTML

          function processDucks() {
            if (document.getElementById("heuy").checked) {
              alert("Huey is checked!");
            } else if (document.getElementById("dewey").checked) {
              alert("Dewey is checked!");
            } else {
              alert("Louie is checked!");
            }
            alert(this.value + " is checked!");
          }
          

JS

If the same function is assigned to multiple elements, each gets its own bound copy

JavaScript Events

The click event (onclick) is just one of many events that can be handled

The Event Object

          function name (event) {
            // an event handler function...
          }
          

JS (template)J

Event handlers can accept an optional parameter to represent the event that is occurring

Event objects have the following properties/methods:

Mouse Events

Clicking

Movement

Mouse Events

Mouse Event Example

          
Move the mouse over me!
          

HTML

          window.onload = function() {
            let target = document.getElementById("target");
            target.onmousemove = target.mousedown = showCoords;
          };

          function showCoords(event) {
            document.getElementById("target").innerHTML =
               "screen : (" + event.screenX + ", " + event.screenY + ")\n"
            +  "client : (" + event.clientX + ", " + event.clientY + ")\n"
            +  "button : (" + event.button;
             
          

JS

screen : (333, 782)
client : (222, 460)
button : 0

Keyboard/Text Events

Key Event Objects

Issue: if the event you attach your listener to doesn't have the focus, you won't hear the event

Possible solution: attach key listener to entire page body, document, an outer element, etc.

Key Event Example

          document.getElementById("textbox").onkeydown = textKeyDown;
          ...
          function textKeyDown(event) {
            let key = String.fromCharCode(event.keyCode);
            if (key == 's' && event.altKey) {
              alert("Save the document!");
              this.value = this.value.split("").join("-");
            }
          }
          

JS

Each time you push down any key, even a modifier such as Alt or Ctrl, the keydown event fires

If you hold down the key, the keydown event fires repeatedly

keypress event is a bit flakier and inconsistent across browsers

Some Useful Keycodes

Page/Window Events

The above can be handled on the window object

Multiple Listeners to the Same Event

          element.addEventListener("event", function);
          

JS (template)

          let button = document.getElementById("mybutton");
          button.addEventListener("click", func1); // button.onclick = func1
          button.addEventListener("click", func2); // button.onclick = func2
          

JS (example)

If you assign onclick twice, the second replaces the first

addEventListener allows multiple listeners to be called for the same event

Note that you do not include "on" in the event name!

Multiple window.onload Listeners

          window.onload = function;
          window.addListener("load", function);
          

JS

It is generally considered bad form to directly assign to window.onload (though it is ok for this class)

Multiple .js files could be linked to the same page, and if they all need to run code when the page loads, their window.onload statements will override each other

By calling window.addEventListener instead, all of them can run their code when the page is loaded

Stopping an Event

You can also return false; from your event handler to stop an event

Stopping an Event, example

          
...
          

HTML

          window.onload = function() {
            let form = document.getElementById("exampleform");
            form.onsubmit = checkData;
          };

          function checkData(event) {
            if (document.getElement("state").length != 2) {
              alert("Error, invalid city/state."); // show error message
              event.preventDefault();
              return false; // stop form submission
            }
          }
          

JS