Learn JavaScript MOUSE EVENTS in 10 minutes! 🖱

#javascript #tutorial #course
// eventListener = Listen for specific events to create interactive web pages
// events: click, mouseover, mouseout
// .addEventListener(event, callback);

[@BroCodez]

// eventListener = Listen for specific events to create interactive web pages
// events: click, mouseover, mouseout
// .addEventListener(event, callback);
const myBox = document.getElementById("myBox");
myBox.addEventListener("click", event => {
event.target.style.backgroundColor = "tomato";
event.target.textContent = "OUCH! 🤕";
});
myBox.addEventListener("mouseover", event => {
event.target.style.backgroundColor = "yellow";
event.target.textContent = "Don't do it 😲";
});
myBox.addEventListener("mouseout", event => {
event.target.style.backgroundColor = "lightgreen";
event.target.textContent = "Click Me 😀";
});


Document


Click Me 😀


#myBox{
background-color: lightgreen;
width: 300px;
height: 300px;
font-size: 4.1rem;
font-weight: bold;
display: flex;
align-items: center;
text-align: center;
}

[@masternobody1896]

yo make more video about how to get a job please

[@high.notes1]

Bro I majorly respect you and I feel like you're working so hard to keep posting content for us. I feel like you should just be free to take a break whenever you feel like it because I know the amount of hard work you put into these videos.

[@BroCodez]

I appreciate that! Tbh I'm mentally exhausted 😩

[@Chilli_Tea]

@@BroCodez Have a break!!! More than enough content to keep us busy for a long while

[@leshanelim9454]

thank you so much!! this helps a lot! my web development has improved significantly ever since i found your channel, and its only going to get better! i love the way you explain and show the code! kudos to you!!

[@KennethCox-or8bm]

Thank you, these videos have helped me learn JavaScript. Please would you let us know which VSCode extension you're using to pull up your Emoji console... I love what you're doing Thanks Again!

[@hellmn9490]

your explanation is so good man

[@TapasShrestha]

awesome video sir , i always learn something new from your video . btw i have a question sir
Whats the difference between using addeventlisterner and using .onclick , .onmouseover etc , its faster to use second option and easier too , event object also works on both methods , so which one should i use

[@nikolasknappen4110]

Bro Code is the Best Code! Thank you for all that you do. You are a gentleman and a scholar.

[@pietraderdetective8953]

BroCode! lovin your videos!
Any plan to make Zig videos? Looks to be the hype especially since people realizes Bun is made with Zig.
cheers!

[@tharunkumar8507]

We would love your content. Thank you ❤ sir

[@MohamedMuhumed-d8u]

the only mentor that made me fall in love with code

[@PyrdeXshorts]

Can you do this for Python also?

[@Hnxzxvr]

No I don’t thing so cause it doesn’t have a getelementbyid or getelementbyclass functions

[@janlim9374]

very clear thank you

[@abdulhamidmuktar9138]

How to add emojis in HTML using VS CODE? Please share thar with us because it is easier than using HTML emojis by using tags

[@camishan8465]

This was awesome

[@Belumga77]

you are my real bro

[@Snickerx]

Super Film!

[@RanMC9918]

most recent comment

[@leFrederic]

Bro sorry for my stupid question, but how can I add emojis on the HTML file just like you did at 1:00?

[@BroCodez]

Win + ;

[@RanMC9918]

@@BroCodez 🙏

[@jiyoungkim9258]

this is so cute functions xD

[@liamlienhard8693]

how do you toggle between the original state and a custom state?

[@248h9]

Can you make course for making spigot plugins?

[@FushigiMigi]

Thanks!

[@SHAHIDZE_GAMING]

This is usefull

[@AJ_Editz002]

Thankyou bro:)

[@SHAHIDZE_GAMING]

Lucky you

[@ahamednafees9961]

Everyone's getting an heart can i too bro?

[@AshwinSI-px5yo]

How did you bring the emoji box in vs code ??

[@RanMC9918]

windows + "."

[@liamlienhard8693]

btw, is the an easy way to make an undo button?

[@BroCodez]

Ctrl + z my brother lol

[@l213dhanesh3]

Code bro😊

[@sergiocondo9585]

Muy buen video, gracias

[@essekgeldim]

First

[@sergiocondo9585]

Buen dia, como hago para que aparezca los emojis?

[@AsianCanadianInvestor]

how did you add that emoji on the html page?

[@jabulanipolokera7027]

press windows button and full stop button combination...you get emojis