Skip to main content

Advanced DOM: Three Most Popular Event Types We Use All The Time!


Event is that we make things interactive.

When we are interacting with a web page, we may click on a button, hover over a picture, drag or drop something, or press the Enter Key. All of those are events and happen all the time.

The process of event is that we select an element and then add an event listener to the element we selected.

To add a listener, we use a method called addEventListener.

element.addEventListener(type, functionToCall);

There are two arguments for the addEventListner.

  • Type: the type of event we want to listen for such as "click"
  • FunctionToCall: the function is the code that we want to run when that event happens
In our daily life, there are three most popular event types we use all the time: click, mouseover, and mouseout.

Click

We always like to click the "start" button to start a game or start shopping. How could we do that event in JavaScript?

I open the DOM page, and I want the page to pop up an alert message when I click the h1. I start to select the h1 : var h1 = document.querySelector("h1").

Then, I add an event listener to the it by giving the event type "click", and an alert function. 

h1.addEventListenter("click", function(){
alert("You Clicked!");})



As you can see, when I click the h1, it pops up the alert message. Then, I add another event listener to h1 which is change the background color to pink as I click the h1.


Actually, what will happen is that when I click the h1, it will pop up the alert message first, then change the background to pink. It means that we can have more than one listener on a given element.

MouseOver

The way that mouseover works is that it's going to fire as soon as we start hovering over something.

If I want the first list message change color to green when I hover over it, I will select the first li and then add event listener to it by setting the type of event to be mouseover, and change the color style in function.


The result will be when my mouse is hovering on the first li, the color changes to green.

MouseOut

In the opposite, mouseout is going to fire as soon as we are not hovering over something. 

If I want the first list message change color from green to red when I move my mouse to somewhere else, I just need to add another event listener to it by setting the type of event to be mouseout, and change the color style in function.


Labels:

Comments

Post a Comment

Popular posts from this blog

Intermediate Express.js: How To Add Styles & Partials in EJS File?

So far, we only have simple HTML tags and ejs tags in each ejs file. Every template page has no style at all. And the basic HTML header and footer are also missing. Today, I learned how to add styles and partials in ejs file. Link Style Step One: Touch a Separate CSS file I create a new directory "Style" under the "EJSDemo" directory, then I add a new CSS file "app.css" inside "Style" folder. Step Two: Add app.use(express.static()) in the app.js I add app.use(express.static("style")) in the "app.js". This will tell Express.js to serve the content of "Style" directory. Step Three: Write styles in CSS file I simple give body an orange background color and set text color to be grey. Step Four: Link to CSS file in the EJS file I just add <link> tag to link the "app.css" file on the top of the h1 tag in each ejs template. As the result, when I run the app and...
Post a Comment
Read more

Intermediate Express.Js: Write Conditions and Loops In The EJS (study note)

We continue to use the app.js which we have build to be the study example. In the last post, we only add a simple EJS tag <%= thingVar %> inside h1 tag. This will match the "thing" to any "thing" request from the user. If Statement Today, the course shows us to write a simple if statement in the EJS file. I learn to apply it to my own app. In the if statement, if users send"/wantto/workout" request, the page will show a new content "Good Idea!". We wrote the if statement in the "diet.ejs" file, and we add "<% %>" tags around the code. We have to wrap every line of JavaScript anytime JavaScript starts and ends. Moreover, you may see there are two types of ejs tags here: <%= %> The one with equal sign. According to the course, when we add equal sign, the value that is returned inside of the tag will be rendered to the HTML page. it will be added to the HTML. For example, if we write ...
Post a Comment
Read more

Authentication Project: Secret Page App Part One (Set up & Create User Model)

So far we only write the RESTful routes to send request and redirect to the related page, but we haven't do anything about authentication. If we can sign up, login, and log out, it will make our app more meaningful. Therefore, the course shows us how to create a secret page app, which will allow us to sign up, login to a secret page, and logout. Since it requires so many pieces, I will divided this project into three parts: set up & create user model, sign up, and login/logout. In this post, I am going to show all the set up process. Set Up Step One: Install packages The first thing we are going to do to create a folder "Auth", and inside of "Auth", we need to create another folder "AuthDemo". Then we cd (change directory) to "AuthDemo". Now we can set up the actual application structure by installing a few packages: passport, passport-local, passport-local-mongoose, mongoose, express, ejs, body-parser, and express-session....
Post a Comment
Read more