Scribd
Upload
10 views

Introduction to buttons and event handling

Uploaded by

The Programmer
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
10 views

Introduction to buttons and event handling

Uploaded by

The Programmer
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 11

Introduction to buttons

and event handling


Buttons

 Buttons are interactive elements in HTML that users can click to trigger an action.
They are commonly used for form submission, navigation, and triggering JavaScript
functions.
Event Handling

Event Handling:
 Event handling is the process of writing JavaScript code to respond to user actions,
such as clicking a button, hovering over an element, or typing on the keyboard. In the
context of buttons, we'll focus on handling click events.

Adding Event Handlers:


 We can use the onclick attribute to add an event handler to a button. This attribute
takes JavaScript code as its value, which will be executed when the button is clicked.
Handling Events with JavaScript:

 Alternatively, we can handle events using JavaScript code written separately from
HTML. This approach is more flexible and maintainable, especially for larger projects.
Explanation

• We first select the button element using


its id attribute.
• Then, we use the addEventListener()
method to attach an event listener to the
button for the 'click' event.
• When the button is clicked, the function
inside addEventListener() is executed,
displaying an alert with the message
"Button clicked!".
Explanation
Example and Practice
Example and Practice
Example and Practice
Example and Practice
Example and Practice

You might also like