$(document).ready(function() {
// Example 1: Click Event
$('#btnClick').click(function() {
alert('Button clicked!');
});
// Example 2: Double Click Event
$('#textInput').dblclick(function() {
alert('Input double-clicked!');
});
// Example 3: Mouse Hover Event
$('p').hover(function() {
$(this).text('Mouse over me!');
}, function() {
$(this).text('Hover over this paragraph.');
});
// Example 4: Change Event
$('#selectOption').change(function() {
var selectedOption = $(this).val();
alert('Selected option: ' + selectedOption);
});
// Example 5: Submit Event
$('form').submit(function(event) {
event.preventDefault();
alert('Form submitted!');
});
// Example 6: Key Press Event
$('#textInput').keypress(function(event) {
var key = event.key;
alert('You pressed the key: ' + key);
});
// Example 7: Key Down Event
$('#textInput').keydown(function(event) {
var keyCode = event.keyCode;
alert('You pressed the key with keyCode: ' + keyCode);
});
// Example 8: Key Up Event
$('#textInput').keyup(function() {
var value = $(this).val();
$('#output').text('Text input value: ' + value);
});
});
In this example, we have various event handling examples:
Click Event: The "Click Me" button displays an alert when clicked.
Double Click Event: The text input displays an alert when double-clicked.
Mouse Hover Event: The paragraph changes its text when the mouse is over it.
Change Event: The select element displays an alert when an option is selected.
Submit Event: The form displays an alert when submitted.
Key Press Event: The text input displays an alert when a key is pressed.
Key Down Event: The text input displays an alert when a key is pressed down.
Key Up Event: The text input updates an output element with its current value when a key is released.