<!DOCTYPE html>
<html>
<head>
<title>jQuery Event Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// 클릭 이벤트
$("#clickButton").click(function(){
alert("Button clicked!");
});
// 마우스 오버 이벤트
$("#hoverDiv").mouseover(function(){
$(this).css("background-color", "lightblue");
}).mouseout(function(){
$(this).css("background-color", "lightgrey");
});
// 키업 이벤트
$("#keyupInput").keyup(function(){
$("#keyupText").text($(this).val());
});
});
</script>
</head>
<body>
<button id="clickButton">Click Me</button>
<div id="hoverDiv" style="width: 100px; height: 100px; background-color: lightgrey; margin-top: 10px;"></div>
<input type="text" id="keyupInput" placeholder="Type something...">
<p>Input: <span id="keyupText"></span></p>
</body>
</html>
1. **HTML Structure**: The document contains a clickable button (`id="clickButton"`), a div for hover effects (`id="hoverDiv"`), and an input field (`id="keyupInput"`) alongside a paragraph to display the input field's live text (`id="keyupText"`). This setup provides a visual and interactive means to illustrate different event types.
2. **Including jQuery**: Through a CDN link, jQuery 3.6.0 is included, enabling the use of its rich set of methods for DOM manipulation and event handling.
3. **jQuery Script**:
- **Click Event Handling**: When the button with `id="clickButton"` is clicked, an alert box with the message "Button clicked!" appears. This demonstrates how to react to click events on elements.
- **Mouse Hover Events**: The div (`id="hoverDiv"`) changes its background color to light blue when the mouse hovers over it and reverts to light grey when the mouse moves away. This is achieved by using the `mouseover()` and `mouseout()` methods, showcasing how to respond to mouse hover events.
- **Keyboard Input Event (Keyup)**: As the user types in the input field (`id="keyupInput"`), the text within a span (`id="keyupText"`) updates in real-time to mirror the input field's value. This effect is implemented using the `keyup()` method, illustrating how to handle keyboard input events.
### Key Points:
- The document effectively demonstrates three fundamental types of event handling in jQuery: click, hover (mouseover and mouseout), and keyboard input (keyup). Each type plays a crucial role in enhancing the interactivity of web pages.
- jQuery's concise syntax and powerful selectors make it straightforward to add sophisticated interactivity with minimal code.
- The example is structured in a way that allows each event handling scenario to be understood and tested individually, making it an excellent learning tool for those new to jQuery or web development.
### Possible Improvements:
- Adding more visual feedback, such as animations or transitions, could further enhance the user experience and demonstrate jQuery's capabilities in creating dynamic web content.
- Incorporating additional jQuery events, such as `dblclick` (double-click), `keydown`, `keypress`, or even custom events, could provide a broader overview of jQuery's event handling potential.
- For educational purposes, including comments in the script to explain the jQuery methods and their parameters in more detail could make the code more accessible to beginners, helping them understand not just the "how" but also the "why" behind each interaction.
'개념 > JQuery' 카테고리의 다른 글
| JQuery) Bubble Chart Example with Chart.js (0) | 2025.03.10 |
|---|---|
| JQuery) Pie Chart Example with Chart.js (0) | 2025.03.09 |
| JQuery) jQuery Mobile Dialog, Popup, and Grid Layout Example (0) | 2025.03.05 |
| JQuery) jQuery Mobile Advanced Grids and Collapsible Panel Example (0) | 2025.03.04 |
| JQuery) jQuery Mobile Input Types, Slider, and Switch Example (0) | 2025.03.03 |