Events

  • Attach event handlers to DOM elements
  • Modify the DOM in response to an event
  • Use callbacks in methods like addEventListener
  • Use callbacks in methods like setTimeout and setInterval

After this we should be able to:

What is an event handler?

  • onclick
  • onload
  • onmouseover
  • onmouseout
  • onunload
  • onfocus
  • onblur
  • onkeypress

What is a callback?

Functions are function objects; that is, functions can be used like any other object, since they are in fact objects themselves.  We can store them as variables and pass them as arguments to other functions. This is the essence of a callback.

example:

 function talk(param1, param2, callback) {
     alert('Started speaking: ' + param1 + ', ' + param2);
     callback();
 };

 talk('hello', 'my name is', function() {
     alert(' zach');
 });
var nameButton = document.getElementById("nameButton");

nameButton.addEventListener("click", function() {
     document.getElementById("name").innerHTML = "zach"
});

We have an object with id nameButton that has an event listener on it. When it is clicked it invokes an anonymous function that writes zach to the div with an id of "name".

addEventListener

<script>
    var nameButton = document.getElementById("nameButton");
        
    nameButton.onclick = function() {
       document.getElementById("name").innerHTML = "zach"
    };

</script>

we can also use the onclick event handler to accomplish the same thing.

 <button onclick="changeBackground()">Change Background </button>

function changeBackground(){
  document.querySelector('body'). style.backgroundColor = "red";
};

we could even write one inline like this:

<script>
var button = document.querySelector("button");
function handleMouse (event) {
    if (event.which == 1)
        console.log("Left button");
    else if (event.which == 2)
        console.log("Middle button");
    else if (event.which == 3)
        console.log("Right button");
}
button.addEventListener("mousedown", handleMouse);
</script>

Event Objects

var count = 0;
var id = setInterval(function() {
    count++;
    alert(" loop: "+count);
}, 1000);

setInterval 

var count = 0;
var id = setInterval(function() {
    count++;
    alert(" loop: "+ count);
    if(count > 2){
    clearInterval(id)
    }

}, 1000);

clearInterval

 var time  = document.getElementById('time')
 
time.onclick = function () {
   var message = "Hello how are you?"
   setTimeout(function() { alertMsg(message); }, 2000);
 };


 function alertMsg(msg) {
     alert(msg);
 }

setTimeout

Event Capturing

When an event happens. It captures down the DOM tree from <html> to the element where the event happened. And then bubbles back up the DOM tree until it gets back to <html>. Along each element it passes, it fires the event. 

 

These 2 phases are collectively known as event propogation.

 

This can cause some weird things to happen.

innerDiv = document.getElementById("inner");

innerDiv.onclick = function(event) {
    console.log("PURPLE");
}

outterDiv = document.getElementsByClassName("outter")[0];

outterDiv.onclick = function() {
    console.log("ORANGE");

};

containerDiv = document.getElementsByClassName("container")[0];

containerDiv.onclick = function() {
    console.log("RED... What is happening???!!!!");
}

Event Bubbling

 

deck

By Zach Klabunde

Made with Slides.com

deck

  • 257

More from Zach Klabunde