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

THIS IS THE GAME PROJECT THAT IS ACTUALLY WORKING.

I struggled to do this work just because it was difficult following all of this code and plus its javascript. I wish we were actually in class again. It is definitely hard to work with code independently without the professor there to help. But I guess this is the chance to learn more about coding independently 🙁

color-game.html /color-game.css /color.js

Join the Conversation

1 Comment

Leave a comment

Leave a Reply to admin Cancel reply

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

css.php