JQuery——事件处理

在 jQuery 中，事件处理允许您在元素上绑定特定的行为，以响应用户的交互动作，如点击、悬停、键盘输入等。以下是一些常见的 jQuery 事件处理的示例：

1. 点击事件：

click 事件在元素被点击时触发。

<!DOCTYPE html>
<html>
<head><title>jQuery Event Handling</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><button id="myButton">Click Me</button><script>$(document).ready(function() {$('#myButton').click(function() {alert('Button clicked!');});});</script>
</body>
</html>

2. 悬停事件：

mouseenter 和 mouseleave 事件在鼠标进入和离开元素时触发。

<!DOCTYPE html>
<html>
<head><title>jQuery Event Handling</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><div id="myDiv" style="width: 100px; height: 100px; background-color: red;"></div><script>$(document).ready(function() {$('#myDiv').mouseenter(function() {$(this).css('background-color', 'blue');}).mouseleave(function() {$(this).css('background-color', 'red');});});</script>
</body>
</html>

3. 键盘事件：

keydown、keyup 和 keypress 事件在用户按下或释放键盘上的按键时触发。

<!DOCTYPE html>
<html>
<head><title>jQuery Event Handling</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><input type="text" id="myInput"><script>$(document).ready(function() {$('#myInput').keydown(function(event) {console.log('Key pressed:', event.key);});});</script>
</body>
</html>

4. 表单事件：

表单事件包括 submit（提交表单时触发）、focus（元素获得焦点时触发）、blur（元素失去焦点时触发）等。

<!DOCTYPE html>
<html>
<head><title>jQuery Event Handling</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body><form id="myForm"><input type="text" name="username" placeholder="Username"><input type="password" name="password" placeholder="Password"><button type="submit">Login</button></form><script>$(document).ready(function() {$('#myForm').submit(function(event) {event.preventDefault();console.log('Form submitted!');});});</script>
</body>
</html>