jQuery02--jQuery事件

发表于 | 分类于 ， ， | 本文总阅读量 次
字数统计: 2.4k | 阅读时长 ≈ 8

jQuery事件学习笔记

jQuery事件

jQuery事件概述

语法结构为：

1
2
$（selector）.action（function（）{
	//事件触发后需要执行的自定义脚本}）

例如为段落元素<\p>添加鼠标单击事件click

1
2
3
$（"p＂）.click（function（）{
alert（“单击成功”）；
}）；

jQuery常用事件

文档/窗口事件

  • 1、ready（）事件
    ready（）事件又称为准备就绪事件，该事件只在文档准备就绪时触发，因此其选择器只能$（document）。一般来说，为了避免文档在准备就绪之前执行了其他jQuery代码而导致错误，所有的jQuery函数都需要写在文档准备就绪函数中，语法结构为：$（document）.ready（function）。
    在实际使用时，文档准备就绪函数function的内部代码可以更加丰富，可以是多个独立的jQuery语句或者jQuery函数的调用组合而成，浏览器会按照先后顺序执行其内部的全部代码。

  • 2、load（）事件
    当页面中指定的元素被加载完毕时会触发load（）事件，该事件通常用于监听具有可加载内容的元素，例如图像元素<\img>、内敛框架<\iframe>等。语法格式为：$（selector）.load（function）其中参数function为必填内容，表示元素加载完毕时需要执行的函数。

  • 3、unload（）事件
    当用户离开当前页面时会触发unload（）事件，该事件只适用于window对象，可能导致触发unload（）事件的行为如下：

    1
    2
    3
    4
    5
    关闭整个浏览器或当前页面；
    在当前页面的浏览器地址栏中输入新的URL地址并进行访问；
    单击浏览器上的“前进”或“后退”按钮；
    单击浏览器上的“刷新”按钮或以当前浏览器支持的快捷方式刷新页面；
    单击当前页面中的某个超链接导致跳转新页面。

    语法格式为：$（window）.unload（function）其中参数function为必填内容，表示离开页面时需要执行的函数。

键盘事件

  • 1、keydown（）事件
    当键盘的按键处于按下状态时将触发keydown（）事件，语法格式为$（selector）.keydown（function）
  • 2、keyup（）事件
    当键盘上已经按下去的按键处于被释放状态时将触发keyup（）事件，语法格式为$（selector）.keyup（function）
  • 3、keypress（）事件
    当键盘上的按键处于按下状态并快速释放时将触发keypress（）事件，语法格式为```$（selector）.keypress（function）
    1
    2
    3
    4

    #### 鼠标事件
    - 1、click（）事件
    当用户使用鼠标左键点击网页文档中的任意HTML元素时均可触发click（）事件，语法格式```$（selector）.click（function）
  • 2、dbclick（）事件
    当用户使用鼠标左键双击网页文档中的任意HTML元素时均可触发dbclick（）事件，语法格式为$（selector）.dbclick（function）
  • 3、hover（）事件
    当用户将鼠标悬停在网页文档中的任意HTML元素上时将会触发hover（）事件，语法格式为$（selector）.hover（function）
  • 4、mousexxx（）系列
    以关键字mouse开头的一系列鼠标事件是根据鼠标移动方向或效果来区分的，语法结构为$（selector）.mousexxx（function）
    xxx替换成具体的动作效果，可替换的关键字如下：
    1
    2
    3
    4
    5
    6
    7
    down：鼠标按键按下。
    up：鼠标按键被释放时，与down相反。
    move：鼠标处于移动状态。
    enter：鼠标进入指定元素。
    leave：鼠标离开指定元素，与enter相反。
    out：鼠标离开指定元素或其子元素。
    over：鼠标穿过指定元素或其子元素，与out相反。
  • 5、toggle（）事件
    toggle（）事件可以看作是一种特殊的鼠标单击事件，可以一次绑定两个或两个以上函数。当元素被单击时，会按照先后顺序每次只触发其中一个函数。语法格式为（selector）.toggle（function1，function2，…，functionＮ）
    其中function1～functionＮ可以替换成需要触发的若干个函数，函数之间用逗号隔开。每次单击鼠标按键都会触发一次toggle事件，按照单击顺序运行函数，当最后一个函数被执行时会下一次触发该事件会重新运行第一个函数。

表单事件

  • 1、blur（）事件
    当某个处于选中状态的元素失去焦点时将触发blur事件，语法格式为$（selector）.blur（function）
  • 2、focus（）事件
    当某个处于未选中状态的元素获得焦点时将触发focus（）事件，语法格式为$（selector）.focus（function）
  • 3、change（）事件
    当输入框或下拉菜单中的内容发生变化时将触发change（）事件，语法格式为$（selector）.change（function）
    其选择器可以是表单中的输入框<\input>、多行文本框<\textarea>或者下拉菜单<\select>。触发效果不同为：
    选择器为<\input>或<\textarea>：用户更改输入框中的内容，然后让输入框失去焦点才触发change（）事件。
    选择器为<\select>：用户选择不同的选项时触发change（）事件。
  • 4、select（）事件
    当文本输入框中有文字内容被选中时，将触发该元素的select（）事件，语法格式为$（selector）.select（function）
    其选择器只能是单行文本框<\input type=“text”>或多行文本框<\textarea>。
  • 5、submit（）事件
    当用户尝试提交表单时，将触发表单元素<\form>的submit事件，语法格式为$（selector）.submit（function）
    该事件的选择器只能是表单元素<\form>。
    用户有两种提交表单的方式—单击特定的“提交”按钮或者使用键盘上的Enter键，特定的“提交”按钮包括<\input type=“submit”>、<\input type=“image”>以及<\button type=“submit”>；使用Enter键的前提是表单中只有一个文本域，或者表单中包含了“提交”按钮。
    由于submit（）事件会在表单正式提交给服务器之前触发，因此常用其进行有效性检测：当表单中填写的内容验证不通过时显示提示语句，并停止表单提交的动作；当内容验证通过时继续完成表单提交动作。

jQuery事件的绑定和接触

jQuery事件的绑定

bind（）方法

bind（）方法可以用于给指定的元素绑定一个或多个事件，语法结构为$（selector）.bind（event，［data，］function）
参数解释：

  • event：必填参数，用于指定事件名称，例如“click”
  • data：可选参数，用于规定需要传递给函数的额外数据
  • function：必填参数，用于规定事件触发时的执行函数
    例如
    1
    2
    $（“button”）.bind（“click”，function（）{
    alert（“触发”）；}）
    如果指定元素绑定的多个事件需要调用同一个函数，可以将这些事件名称有空格隔开后并列添加在参数event中，例如
    1
    2
    $（“button”）.bind（“click dbclick mouseover”，function（）{
    alert（“触发”）；}）
    如果需要为指定元素同时绑定多个事件并触发不同的函数，语法结构为$（selector）.bind（event1:function1，event2:function2，…eventＮ，functionＮ）

delegate（）方法

delegate方法可以用于给指定元素的子元素绑定一个或多个事件，语法格式为$（selector）.delegate（childSelector，event，［data，］function）
参数说明：

  • childSelector：必填参数，用于规定需要绑定事件的一个或多个事件子元素。
  • event：必填参数，用于指定需要绑定给子元素的一个或多个事件名称，用法后bind（）方法同。
  • data：可选参数，用于规定需要传递给函数的额外数据
  • function：必填参数，用于规定需要绑定的事件触发时的执行函数。
    delegate（）方法的优势在于还可以为指定元素的未来子元素（当前未创建，后续通过代码动态添加的子元素）绑定事件。

on（）方法

on（）方法可以用于给指定元素的子元素绑定一个后多个事件，包含了bind（）和delegate（）方法全部功能。
语法结构为$（selector）.on（event，［childSelector，］［data，］function）
参数解释和上述bind（）和delegate（）方法的参数相同，只是加了方括号的都是可选参数。

jQuery事件的解除

unbind（）方法

语法格式为$（selector）.unbind（［event］，［，function］）

  • event：可选参数，用于指定需要解除的一个或多个事件名称，如果该参数不填写，则表示解除指定元素的全部事件
  • function：可选参数，用于规定需要解除的事件触发时的执行函数。

undelegate（）

语法格式为$（selector）.undelegate（［childSelector，］［event］［，function］）
childSelector：可选参数，用于规定需要解除事件的一个或多个子元素
该方法主要是解除之前使用delegate（）方法绑定的事件，不能用于解除其他方法绑定的事件。

off（）方法

包含unbind（）方法和undelegate（）方法的全部功能。
语法格式为$（selector）.off（［childSelector，］［event］［，function］）
参数解释同上。

jQuery临时事件

在某些特殊情况下，为元素绑定的事件仅需要执行一次就必须解除绑定，此类情况称为元素的临时事件。
例如为按钮元素绑定临时的单击事件：

1
2
3
$（“button”）.on（“click”，function（）{
alert（“ok”）；
$（this）.off（“click”）；}）

用on（）方法为按钮进行click事件绑定，当click事件首次触发时立刻调用off方法解绑事件。

可以用专门的one（）方法来代替on（）和off（）方法。one（）方法在触发一次后就自动解绑，语法格式为$（selector）.one（［childSelector，］［event］［，function］）
参数解释同上

-------------本文结束感谢您的阅读-------------