
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
What is the best way to add an event in JavaScript?
The best way to add an event to any element is to use the addEventListener() method.
Following is the code to add an event in JavaScript −
Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result{ font-size: 20px; font-weight: 500; color: rebeccapurple; } </style> </head> <body> <h1>Adding event in JavaScript</h1> <div style="color: green;" class="result"<Hello world>/div> <button class="Btn">CLICK HERE</button> <h3> Click on the above button to increment the font size of above text </h3> <script> let resEle = document.querySelector(".result"); document.querySelector(".Btn").addEventListener("click", () => { resEle.style.fontSize = "34px"; }); </script> </body> </html>
Output
The above code will produce the following output −
On clicking the ‘CLICK HERE’ button −
- Related Articles
- What is the best way to concatenate strings in JavaScript?
- What is the best way to add DOM elements with jQuery?
- Best way to store weekly event in MySQL?
- What is the best way to compare two strings in JavaScript?
- What is the best way to initialize a JavaScript number?
- What is the best way to search for an item in a sorted list in JavaScript?
- What is the best way to do optional function parameters in JavaScript?
- What is the best way to break from nested loops in JavaScript?
- What is the best way to initialize a JavaScript Date to midnight?
- What is the best way of declaring multiple Variables in JavaScript?
- What is the best way to convert a number to a string in JavaScript?
- What is an event in JavaScript?
- What is the best way to handle a Javascript popup using Selenium Webdriver?
- The best way to remove duplicates from an array of objects in JavaScript?
- What is the best way to check capacity in Java?

Advertisements