事件管理
事件管理
事件管理 是 CoddyKit 上的免费 jQuery Academy 课时。 这是第 1 节课，共 1 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 jQuery Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 jQuery Academy 课程共包含 1 节课。
简介
您好，
在介绍 jQuery 时，我们提到它不仅可以进行DOM 操作，还具备事件管理这一重要功能。
什么是事件
首先，让我们了解什么是事件。
事件大多由用户在 Web 浏览器中触发。
移动设备用户触摸屏幕、Web 用户移动鼠标、点击按钮以及滚动鼠标等，都属于由用户引起的事件。
由于 Javascript 是一种编程语言，我们将根据发生的事件来管理程序流程。
点击
click() 方法
让我们从最简单的事件开始：按钮点击事件。
click() 方法用于管理 HTML 中的点击事件。
我们可以使用下面的语法监听点击事件。
$(selector).click(handler);
- 使用 $(selector) 选择要监听的元素。
- handler 表示发生点击时要运行的回调函数。
让我们来编写一个示例。
<button>Button</button>
<script>
/* Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
$('button').click(function(){
alert('Button clicked');
});
})
</script>警告
click 方法使用它接收的匿名函数来处理按钮点击。
双击
鼠标事件
下面介绍一些用户可以使用鼠标触发的事件。
让我们点击按钮吧！
<button>Coddy Button</button>
<script>
// runs when button is click
$("button").click(function(){
$('button').text('Clicked')
});
// runs when button is double click
$("button").dblclick(function(){
$('button').text('Double Clicked')
});
</script>鼠标事件
请注意，某些事件无法在移动应用中测试，例如 Hover 之类的事件无法在移动设备上执行！
<button>Coddy Button</button>
<script>
/* It runs when the mouse
hovers over the button
*/
$("button").hover(function(){
$('button').text('Hovering...')
});
/*
It runs when the mouse
enters an element
*/
$("button").mouseenter(function(){
$('button').text('Mouse enter...')
});
/*
It runs when the mouse leaves
an element
*/
$("button").mouseleave(function(){
$('button').text('Mouse Leave...')
});
</script>键盘事件
键盘事件
现在，我们将学习如何处理键盘事件。
首先，让我们定义一个输入框，然后处理由该输入框生成的事件。
<input type="text" id="name"
name="yourname"
placeholder="Enter your name" />
<p>Keyboard event: <span id="state"></span></p>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
/*
It runs every time we press
the keyboard key on the keyboard.
*/
$('#name').keydown(function(){
$('#state').text('Key down')
});
/*
It runs when we take our finger
off the keyboard key
*/
$('#name').keyup(function(){
$('#state').text('Key up')
});
// Runs when the user focuses on input.
$('#name').focus(function(){
$('#state').text('Focus')
});
/*
It works when we unfocus
from an input on the keyboard.
*/
$('#name').blur(function(){
$('#state').text('Blur')
});
})
</script>表单事件
使用 jQuery，我们还可以管理表单中发生的事件。
在输入框中输入数据，或从选择框中进行选择等行为，都属于表单事件。
表单事件示例
在下面的代码中，我们演示了多个表单事件。
*
listen to the form with the coddyForm
id and run when submit button clicked
*/
$("#coddyForm").submit(
function(event){
});window 事件
最后，让我们看看 window 事件。
最重要的 window 事件可能是 $(document).ready()，但由于我们之前已经学习过这个事件，所以接下来将学习其他 window 事件。
resize 方法
resize() 方法
resize 方法绑定到浏览器的 window 对象上，并在窗口大小发生变化时触发。
const window = {};
const $ = (obj) => ({
resize: (callback) => {
console.log("Resize event handler would be attached here.");
}
});
$(window).resize(function() {
//trigging when user change windows size
});scroll 方法
scroll() 方法
scroll() 方法连接到可滚动元素或 window 对象，并且会在用户滚动相应组件时触发。
$(window).scroll(function() {
//Calling when user scroll the window
});
$('#my-scrollable-element').scroll(function() {
//Calling when user scroll the cursor
//that inside the #my-scrollable-element element
});恭喜
恭喜您 🎉
我们学习了在 jQuery 中管理事件。
下一节中，我们将学习使用 jQuery 制作动画。
常见问题解答
「事件管理」课时是免费的吗？
是的 — 「事件管理」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 jQuery Academy 课程的其余内容，请升级到 CoddyKit PRO。 jQuery Academy 课程共包含 1 节课。
「事件管理」这节课中我会学到什么？
事件管理 你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 jQuery Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 jQuery Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 1 节。
「事件管理」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 jQuery Academy 课中编写并运行代码吗？
能。每节 jQuery Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。