Introduction

Events in JavaScript are actions or occurrences that happen in the browser, such as clicking a button, typing in a field, or loading a page. JavaScript can listen to these events and respond accordingly.

Events are essential for creating interactive and dynamic web applications.

What is an Event in JavaScript?

An event is something that happens to an HTML element. In simple words, events allow JavaScript to react when a user interacts with a web page.

Common JavaScript Events

Some commonly used JavaScript events include:

● click
● change
● keyup
● keydown
● submit
● load

Handling Events Using HTML Attributes

Events can be handled directly in HTML using event attributes.

<button onclick="showMessage()">Click Me</button>

<script>
function showMessage() {
    alert('Button clicked');
}
</script>

Handling Events Using `addEventListener`

The recommended way to handle events is using addEventListener.

<button id="myBtn">Click Me</button>

<script>
document.getElementById('myBtn').addEventListener('click', function() {
    alert('Button clicked');
});
</script>

Event Object

The event object provides information about the event.

document.addEventListener('click', function(event) {
    console.log(event.type);
});

Form Events Example

<form id="myForm">
    <input type="text" />
    <button type="submit">Submit</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault();
    alert('Form submitted');
});
</script>

Events in Salesforce JavaScript

Events are widely used in Lightning Web Components and Visualforce JavaScript to handle user interactions, validations, and dynamic UI behavior.

Conclusion

Events are a core part of JavaScript that make web pages interactive. By understanding how events work, developers can respond to user actions effectively.

Learning JavaScript events is essential for building modern and responsive web applications.

LWC Beginner to Advance

JS Event