(点击图片进入关卡)
互动元素是网络的主旨！
简介
您可以使用 .on() 函数将事件绑定到某些元素。
element.on("click", functionName)
默认代码
<!-- 有可能使您的网站互动！ -->
<!-- jQuery包含".on()" 来监视事件。 -->
<!-- 点击元素时发生 "click" 。 -->
<script>
// 请记住只有JavaScript进入<script>标签内。
// 这将按钮的文字颜色设置为"blue"”。
var button = $("#theButton");
// 该按钮被点击时，该功能将运行。
function buttonClicked() {
// 这将按钮的文字颜色设置为"blue"”。
button.css("color", "blue");
// 使用.css（）设置按钮的 "background-color"
}
// ".on()" ”用于将事件挂接到元素。
// 现在，按钮将运行按钮点击…
// ...在"click"时发挥作用。
button.on("click", buttonClicked);
</script>
<style>
/* 记住只有CSS规则放在&tSyt>标签内 */
body {
text-align:center;
}
#theButton {
500px;
height: 125px;
font-size: 3em;
}
</style>
<button id="theButton">我是按钮</button>
<!-- 请记住点击按钮以使更改发生 -->
概览
事件
事件是在网站使用过程中发生一些事情，例如按钮被点击的 "click" 事件、鼠标经过图片的 "mousemove" 事件等等。
我们可以使用 eventlistener （事件监听器）和这些事件进行"hook"（挂接）。jQuery有一系列工具，能让这些工作变得更加轻松。其中最简单的是 on() 函数。
对于任意元素， on() 会监听特定事件的发生，然后调用指派的 callback （回调）函数。
on(eventName, functionName)
on() 的结构很简单， on(eventName, functionName) 。 eventName 是一个字符串，是要监听的事件的名称。例如： "click" 、 "mousemove" 、 "keydown" 。 functionName 是你所创建的某个函数的名称。
var button = $("#theButton");
function thisIsAFunction() {
// 这里面的代码只会在按钮被点击时执行。
}
button.on("click", thisIsAFunction);
注意第二个参数 functionName ，其后没有跟 () 。因为这里不是 calling （调用）函数。这里仅仅是告诉 on() 函数，在正确的时候应该调用什么函数。
点击 解法
<!-- 有可能使您的网站互动！ -->
<!-- jQuery包含".on()" 来监视事件。 -->
<!-- 点击元素时发生 "click" 。 -->
<script>
// 请记住只有JavaScript进入<script>标签内。
// 这将按钮的文字颜色设置为"blue"”。
var button = $("#theButton");
// 该按钮被点击时，该功能将运行。
function buttonClicked() {
// 这将按钮的文字颜色设置为"blue"”。
button.css("color", "blue");
// 使用.css（）设置按钮的 "background-color"
button.css("background-color", "blue");
}
// ".on()" ”用于将事件挂接到元素。
// 现在，按钮将运行按钮点击…
// ...在"click"时发挥作用。
button.on("click", buttonClicked);
</script>
<style>
/* 记住只有CSS规则放在&tSyt>标签内 */
body {
text-align:center;
}
#theButton {
500px;
height: 125px;
font-size: 3em;
}
</style>
<button id="theButton">我是按钮</button>
<!-- 请记住点击按钮以使更改发生 -->