<!
DOCTYPE html>
<html>
<head>
<title>DOM Methods</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f0f8ff;
}
.example {
font-weight: bold;
color: red;
}
h1, h2 {
color: #2e8b57;
text-align: center;
}
h1 {
font-size: 32px;
text-shadow: 2px 2px 4px #aaa;
}
h2 {
font-size: 24px;
margin-top: 20px;
text-decoration: underline;
}
p {
line-height: 1.6;
font-size: 18px;
}
#myParagraph {
color: blue;
font-style: italic;
border: 2px solid #1e90ff;
padding: 10px;
border-radius: 8px;
width: fit-content;
margin: 10px auto;
}
button {
background-color: #4682b4;
color: white;
border: none;
padding: 10px 20px;
margin: 10px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #5a9bd4;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
button:active {
transform: scale(0.98);
}
#myParagraph {
animation: fadeIn 1s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<h1 id="heading">DOM EventListeners</h1>
<h2>What are EventListeners?</h2>
<p>EventListener is a way to tell the web browser to "listen" for a specific
event (like a click, key press, or page load) and then respond by running some code
when that event happens.</p>
<p>For Example, imagine you want to show a message when a button is clicked.
Instead of constantly checking if the button is clicked, you can "listen" for the
click event, and when it happens, the browser will automatically run your code.</p>
<p>Example of DOM EventListeners:</p>
<p><b>Button Click Event Listener:</b> A button click event listener detects
when a button is clicked by the user. When the button is clicked, a function is
executed.</p>
<p><b>Mouse Hover Event Listener:</b> A mouse hover event listener is triggered
when the user moves their mouse over a specific element (like a button, image, or
text). Commonly, this is used to change styles.</p>
<p><b>Input Field Event Listener:</b> An input field event listener is used to
detect changes in an input field. This can capture events like typing text,
focusing on the field, or when the user submits the form.</p>
<h2 style="text-align: left;">Examples of each illustration.</h2>
<!-- Example 1: Button Click Event Listener -->
<p>Button Click Event Listener</p>
<button id="clickButton">Click Me!</button>
<p id="clickMessage"></p>
<script>
// Example 1: Button Click Event Listener
document.getElementById('clickButton').addEventListener('click', function()
{
document.getElementById('clickMessage').textContent = 'Button was
clicked!';
});
</script>
<h2 style="text-align: left;">Mouse Hover Event Listener</h2>
<p>Mouse Hover Event Listener</p>
<p id="hoverText">Hover over this text to change its color.</p>
<script>
// Example 2: Mouse Hover Event Listener
document.getElementById('hoverText').addEventListener('mouseover',
function() {
this.style.color = 'red';
});
document.getElementById('hoverText').addEventListener('mouseout',
function() {
this.style.color = 'black';
});
</script>
<h2 style="text-align: left;">Input Field Event Listener</h2>
<p>Input Field Event Listener</p>
<input type="text" id="inputField" placeholder="Type something...">
<p id="inputMessage"></p>
<script>
// Example 3: Input Field Event Listener
document.getElementById('inputField').addEventListener('input', function()
{
document.getElementById('inputMessage').textContent = 'You typed: ' +
this.value;
});
</script>
</body>
</html>
