事件

一、页面事件

jQuery 中页面事件的语法格式如下：

jQuery 对象.事件名(事件处理函数)

例如：

$(document).ready(function () {});
// 简写成
$(function () {});

二、鼠标事件

事件	说明
click	单击左键事件。
mouseover	鼠标移入事件。
mouseout	鼠标移出事件。
mousedown	鼠标按下事件。
mouseup	鼠标松开事件。
mousemove	鼠标移动事件。

onmousedown 事件

与 onmousedown 事件相关连得事件发生次序（鼠标左侧/中间按钮）：
1. onmousedown
2. onmouseup
3. onclick
与 onmousedown 事件相关连得事件发生次序 (鼠标右侧按钮):
1. onmousedown
2. onmouseup
3. oncontextmenu

鼠标事件的使用

提示

在我们的代码中，使用 $("div").mouseover 给 id 名为 item1 的元素设置鼠标移入事件，当鼠标移入该元素，元素会添加背景蓝色。
使用 mouseout 设置鼠标移出，元素背景颜色变为粉色。
使用 $("#btn").click 给 id 名为 btn 的元素设置点击事件，当点击该元素，跳出一个警告框。
使用 $("p").mousedown 设置鼠标按下事件，当按下该元素，p 元素的文字颜色变为蓝色。
使用 $("p").mousedown 设置鼠标按下事件，当按下该元素，p 元素的文字颜色变为粉色。

三、键盘事件

事件	说明
keydown	键盘按下时触发。
keyup	键盘松开时触发。
keypress	事件会在键盘按键被按下并释放一个键时触发。

提示

在上面代码中，当我们在输入框中输入字符时，会触发 keydown 事件打印“正在输入”。
当键盘松开，会触发 keyup 事件，我们使用正则表达式定义了输入框的输入规则，通过 val 获取当前输入，如果当前输入符合规则，则在输入框下方会显示文字“输入的电话号码符合要求!”，反之输入框下方会显示“手机号码格式不正确!”。

四、表单事件

事件	说明
focus	获得焦点时触发的事件。
blur	失去焦点时触发的事件。
select	选中单行或多行文本框会触发的事件。
change	单选框、复选框、下拉列表框等选中项发生改变触发的事件。

聚焦与失焦

提示

在上面代码中，当聚焦到搜索输入框时，会触发 focus 事件，输入框中的 value 被置为空；当移开鼠标，会触发 blur 事件，输入框失去焦点，value 又变成了 "搜索一下，喜欢的课程"。

select事件

提示

在上面代码中，当我们选中输入框时，会触发 select 事件，输入框的背景颜色改变。
当我们选中多行文本框时，文本框中的字体颜色改变。
注意，是指用鼠标选中里面的文字

change 事件

提示

在上面的代码中，当我们选中其中一个表单元素项时，会触发 change 事件，通过 $("#item").text() 我们可以在 id 名为 item 的元素中添加 text 方法括号里的内容。
通过 $(this).val() 我们可以获取当前选中表单选项的内容，最后使用 css 方法把元素的字设置为蓝色。

五、滚动事件

 $(function () {
        $("div").scroll(function () {
          $("strong").css("color", "blue");
          $("div").css({
            "border-color": "blue",
            "box-shadow": "3px 3px 10px #D1D9D9",
          });
        });

        // 给文档对象绑定滚动事件
        $(document).scroll(function () {
          var r = Math.random() * 255;
          var g = Math.random() * 255;
          var b = Math.random() * 255;

          $("pre").css("color", `rgb(${r},${g},${b})`);
        });
      });

最后，开启 8080 端口，打开 Web 服务，我们可以看到如下效果：

拖动网页右侧滚动条可以看到文字在随机变色，效果如下：

六、绑定事件

在 jQuery 中，我们使用 on 或 bind 方法可以绑定一个或者多个事件。

其语法格式为：

jQuery对象.on(事件类型, 事件处理函数);

或

jQuery对象.bind(事件类型, 事件处理函数);

运行该程序，鼠标悬浮到 div 上后 div 变为绿色，鼠标移除时变为粉色。

on和bind的区别

bind只能给符合条件的元素本身添加事件
on可以将子元素的事件委托给父元素进行处理,而且可以给动态添加的元素加上绑定事件
也就是对于新添加的元素如果是on绑定,符合条件的新元素也会绑定事件,如果是bind则不影响新元素
jquery绑定事件 bind和on的区别open in new window

七、合成事件

合成事件就是一个事件来代表多个事件，例如：

我们可以使用 hover 方法来给元素同时绑定鼠标移入和移出的处理函数。即：

hover = mouseover + mouseout

其语法结构为：

jQuery对象.hover(mouseover的事件处理函数, mouseout的事件处理函数);

函数 1 是鼠标移入事件会触发的处理函数；函数 2 是鼠标移出事件会触发的处理函数。

提示

在上面代码中，页面上会显示一个可旋转的 div 元素块，当我们把鼠标移到元素上，会触发鼠标移入事件，元素会旋转 60 度；当我们把鼠标移开目标元素，元素旋转 360 度，恢复原状。

八、自定义事件

自定义事件就是用户可以自己定义一个事件。在 jQuery 中，我们使用 on 方法来定义事件，然后通过 trigger 方法来触发该事件。

其语法格式为：

jQuery对象.on(事件类型, 处理函数); // bind 也可以

jQuery对象.trigger(事件类型);

九、事件对象

当事件发生时，我们会把该事件的详细信息记录在事件对象中，然后通过事件对象的属性来了解事件的相关信息。

在 jQuery 中，我们使用event来获取一个事件的信息。

属性	说明
type	获取事件的类型。
target	获取触发事件的元素。
which	获取单击事件中鼠标的左、中、右键。
clientX、clientY	获取鼠标相对于页面左上角的坐标。
pageX、pageY	获取鼠标相对于页面左上角的坐标。（包括滚动条滚动的 x、y 轴距离）
shiftKey	判断是否按下 shift 键。
ctrlKey	判断是否按下 ctrl 键。
altKey	判断是否按下 alt 键。
keyCode	获取按下键盘的键码值。

type 和 target 属性的使用

提示

在上面代码中，当我们点击页面上的按钮，会触发 click 事件，通过使用 event.type，警告框中会输出当前触发事件的类型。
通过使用 event.target 会给当前触发该事件的目标元素设置背景颜色。

事件

# 事件

# 一、页面事件

# 二、鼠标事件

# 鼠标事件的使用

# 三、键盘事件

# 四、表单事件

# 聚焦与失焦

# select事件

# change 事件

# 五、滚动事件

# 六、绑定事件

# 七、合成事件

# 八、自定义事件

# 九、事件对象

# type 和 target 属性的使用

# 键盘操作

事件