DEV Community

Cover image for JavaScript Chapter 7 - Events in JavaScript
Dzun N
Dzun N

Posted on

JavaScript Chapter 7 - Events in JavaScript

Hello friends 👋👋. See you again at the basic JavaScript tutorial. This time according to the title, we will discuss events in JavaScript, just go to the material.

INTRODUCTION AND UNDERSTANDING JAVASCRIPT

Hello friends. This time, according to the title, we will discuss Events in Javascript. Do you know what an event is? An event is something the user does that triggers the nets of code. Surely my friend is still confused by this understanding. I will explain again bye, Suppose we have a button on a website or application that we build. And we want to give an action when the button is clicked. So the event here is an "event". For example, when the button is clicked it will display a sentence. So the event is a click. The following events are contained in javascript.

Kinds of Events in Javascript

  • onclick = event when an html element is clicked
  • onchange = event when an html element changes
  • onmouseover = event if an html element is placed the mouse cursor
  • onmouseout = event if when the mouse cursor leaves the html element
  • onkeydown = is an event if when an HTML element occurs
  • onload = event when the element or page is loaded Well, we will discuss some of the Javascript events described above.

HOW TO MAKE A JAVASCRIPT EVENT

To create an event with javascript, we can add attributes with the event names above, to the html element that we want to give an event for example.

EXAMPLE EVENT ON JAVASCRIPT

For example I will create a click event on a button. So I want to display a sentence when the button is clicked:

image

Try my friend, pay attention to the example above, there is a button that we give when the event is clicked.

<button onclick="show_name()">Click here</button>
Enter fullscreen mode Exit fullscreen mode

When this button is clicked it will run the show_name() function. So then we create a function name show.

function tampil_nama(){dicument.getElementByid("hasil").innerHTML = "<h3>Nama Saya Dzun</h3>";}
Enter fullscreen mode Exit fullscreen mode

The content of the function show_name() is to display the sentence "My name is Yogi" in the result id element.

Look at the following picture.

image

image

After clicking the "button" it will appear under the "My name is Dzun" button.

CONCLUSION

In conclusion, there are 6 events in javascript and the one I example above is the onclick event. So when we click the button, the contents of the function will appear more or less like that and you can develop it yourself according to your creativity. So, until this article on learning Javascript, Thank you

Top comments (1)

Collapse
 
shine18 profile image
Aakash Ahmed

Awesome Man, I also found another article over here on events: 10code.dev/javascript/what-are-jav...