DOM events

This week was an add-on to what we did in the intro to Dom. I enjoyed learning more about how to do CSS tricks in a javascript way which was interesting.

Describe what the two arguments of the addEventListener method are and how they work. Give four examples of the first argument and give examples of using an anonymous function vs. a declared function for the second argument. Use the code-insert tool for your examples.

The addEventListener is straight forward to its name and it is basically what you would do in a CSS file but doing the same thing in JS. This is adding interaction to the web page (ex: when a user clicks a button the body turns pink.) The two arguments is a type of listener and a function

//syntax for addEventListener
element.addEventListener(type,functionToCall);

mouseover is a hover event.

let lis = document.querySelectorAll("li");for (let i = 0; i < lis.length; i++) {    lis[i].addEventListener("mouseover", function () {        this.classList.add("selected");    
});

mouseout is the opposite of mouseover which happens when you hover away.

let lis = document.querySelectorAll("li");for (let i = 0; i < lis.length; i++) {
lis[i].addEventListener("mouseout", function () {
        this.classList.remove("selected");
    });

click is when you click on an element and an action happens

p1Button.addEventListener("click", function () {
    if (!gameOver) {
        p1Score++;
        if (p1Score === winGame) {
            p1Display.classList.add("winner");
            gameOver = true;
        }
        p1Display.textContent = p1Score;
    }

});

These are the problem sets for this week:

color-toggle.html/color-toggle.js

intro-events.html/intro-events.js

score-keeper.html/score-keeper.css/score-keeper.js

to-do.html/to-do.css/to-do.js

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *

css.php