DEV Community

Cover image for Dom Event Introduction - JavaScript Series - Part 27
Muhammad Ali (Nerdjfpb)
Muhammad Ali (Nerdjfpb)

Posted on • Originally published at blog.nerdjfpb.com

Dom Event Introduction - JavaScript Series - Part 27

Events are things like - clicking, hovering on something or typing anything on search. There can be many others event in a website. We can do something based on this event using javascript
We'll start playing just by using a button. Let's add a button to the html. You can find the code in github

Alt Text

You can read more about events in mdn web docs

Alt Text

We are going to use a mouse event for today's example

Alt Text

First we'll get the button using document.querySelector('button')
Second step will be add a EventListener. Which is going to run the event. addEventListener has 2 parameters. One is the event name, another one is function where we are going to write what happens if the event occurs.
Let's write some code now

Alt Text

See the result

Alt Text

Turn on the notification so that you can stay with me when I publish the next part of this!

Other posts of this series can be found here – https://blog.nerdjfpb.com/tag/javascript/

You can see the graphical version here

Source Codes - { Check commits }

GitHub logo nerdjfpb / javaScript-Series

A tutorial for JavaScript Beginners

javaScript-Series

A tutorial for Absolute Beginners of JavaScript.

You can find the total pdf in - Here

You can check the commits to find the part by part codes.

Blogs

Day 1
  • Day 1 - What is JavaScript?
Day 2
  • Day 2 - JavaScript Types?
Day 3
  • Day 3 - Javascript Types Cont.
Day 4
  • Day 4 - Javascript Types Cont.
Day 5
  • Day 5 - Javascript Comparisons
Day 6
  • Day 6 - Javascript Variables
Day 7
  • Day 7 - More About Variables
Day 8
  • Day 8 - Conditional Statement
Day 9
  • Day 9 - More Conditional Statement
Day 10
Day 11
Day 12
Day 13
Day 14
Day 15
Day 16
Day 17

Originally it published on nerdjfpbblog. You can connect with me in twitter or linkedin!

Top comments (0)