Making things interactive
"Listen for a click on this <button>"
"Listen for a hover event on the <h1>"
"Listen for a keypress event on text input"
To add a listener, we use a method called addEventListener
var button = document.querySelector("button");
button.addEventListener("click", function() {
console.log("SOMEONE CLICKED THE BUTTON!");
});
element.addEventListener(type, functionToCall);
Let's display a message when a button is clicked
var button = document.querySelector("button");
var paragraph = document.querySelector("p");
//SETUP CLICK LISTENER
button.addEventListener("click", function() {
paragraph.textContent = "Someone Clicked the Button!";
});
<button>Click Me</button>
<p>No One Has Clicked Me Yet</p>
We could also rewrite it using a named function
var button = document.querySelector("button");
var paragraph = document.querySelector("p");
button.addEventListener("click", changeText);
function changeText() {
paragraph.textContent = "Someone Clicked the Button!";
}
MDN lists over 300 different events! Here are some of the more common ones:
var paragraph = document.querySelector("p");
//SETUP MOUSE OVER LISTENER
paragraph.addEventListener("mouseover", function() {
paragraph.textContent = "Stop hovering over me!";
});
<p>I dare you to mouse over me</p>
Let's try a quick example using mouseOver
var paragraph = document.querySelector("p");
//SETUP MOUSE OVER LISTENER
paragraph.addEventListener("mouseover", function() {
paragraph.textContent = "Stop hovering over me!";
});
//SETUP MOUSE OUT LISTENER
paragraph.addEventListener("mouseout", function() {
paragraph.textContent = "Phew, thank you for leaving me alone";
});
Let's use mouseout so that our message changes back when the user is done hovering
var paragraph = document.querySelector("p");
//SETUP MOUSE OVER LISTENER
paragraph.addEventListener("mouseover", function() {
this.textContent = "Stop hovering over me!";
});
//SETUP MOUSE OUT LISTENER
paragraph.addEventListener("mouseout", function() {
this.textContent = "Phew, thank you for leaving me alone";
});
We can DRY up our code with one small change: