BCSP-玄子前端开发之JavaScript+jQuery入门CH12_jQuery事件与动画
4.12 事件
4.12.1 网页中的事件
事件是用户在浏览器中操作页面时所引发的动作,很多网页交互需要通过事件实现,例如tab切换效果,可以通过鼠标单击事件实现
jQuery事件是对JavaScript事件的封装,jQuery事件操作的三个组成部分
- 事件主体、事件绑定函数、事件处理函数
$(selector) .click( function() {
……
} )
4.12.2 jQuery 事件
基础事件
- window事件
- 鼠标事件
- 键盘事件
- 浏览器事件
- 表单事件
复合事件
- 鼠标光标悬停
4.12.3 鼠标事件
鼠标事件是用户在文档上移动或点击鼠标而产生的事件
方法 | 描述 | 执行时机 |
---|---|---|
click() | 触发或将函数绑定到指定元素的click事件 | 单击鼠标时 |
mouseover() | 触发或将函数绑定到指定元素的mouseover事件 | 鼠标指针移过时 |
mouseout() | 触发或将函数绑定到指定元素的mouseout事件 | 鼠标指针移出时 |
mouseenter() | 触发或将函数绑定到指定元素的mouseenter事件 | 鼠标指针进入时 |
mouseleave() | 触发或将函数绑定到指定元素的mouseleave事件 | 鼠标指针离开时 |
4.12.4 鼠标事件方法的区别
方法 | 相同点 | 不同点 |
---|---|---|
mouseover() | 鼠标进入被选元素时会触发 | 鼠标在其被选元素的子元素上来回进入时:触发mouseover不触发mouseenter |
mouseenter() | ↑ | ↑ |
mouseout() | 鼠标离开被选元素时会触发 | 鼠标在其被选元素的子元素上来回离开时:触发mouseout不触发mouseleave |
mouseleave() | ↑ | ↑ |
4.12.5 键盘事件
用户每次按下或者释放键盘按键时都会产生事件
方法 | 描述 | 执行时机 |
---|---|---|
keydown() | 触发或将函数绑定到指定元素的keydown事件 | 按下键盘时 |
keyup() | 触发或将函数绑定到指定元素的keyup事件 | 释放按键时 |
keypress() | 触发或将函数绑定到指定元素的keypress事件 | 产生可打印的字符时 |
不是所有的键都会触发keypress事件,如“ALT”“CTRL”“ESC”等均不会触发该事件
键盘事件的事件处理方法可接收event对象,通过event.keyCode属性可以获取到键码值,判断是否按下某个按键
4.12.6 浏览器事件
调整网页大小或拖动滚动条等操作会产生浏览器事件
方法 | 描述 | 执行时机 |
---|---|---|
resize() | 将事件处理函数附加到resize事件 | 浏览器窗口尺寸发生改变时 |
scroll() | 将事件处理函数附加到scroll事件 | 滚动条或可滚动的元素滚动时 |
4.12.7 表单事件
方法 | 描述 | 执行时机 |
---|---|---|
focus() | 将事件处理函数附加到focus事件 | 元素获得焦点时 |
blur() | 将事件处理函数附加到blur事件 | 元素失去焦点时 |
change() | 将事件处理函数附加到change事件 | 元素的值发生改变时 |
submit() | 将事件处理函数附加到submit事件 | submit事件只适用于<form> 元素,当提交表单时触发 |
4.12.8 绑定事件
$( selector ).on( event[, descendant selector][, data], function );
$( selector ).on( events[, descendant selector][, data] );
// 绑定单个事件
$( selector ).on( "event1", function() { …… } )
// 为多个事件绑定相同的事件处理函数
$( selector ).on( "event2 event3 …", function() { …… }
// 同时绑定多个事件
$( selector ).on( {
"event1" : function() { …… },
"event2 event3 …" : function() { …… },
……
} )
4.12.9 移除事件
$( selector ).off( event[, descendant selector][, handler] );
$( selector ).off();
- 示例
$( selector ).off( "event1" )
$( selector ).off( "event2 event3 …" )
$( selector ).off(); // 移除元素上绑定的所有事件处理程序
4.12.10 复合事件
hover()方法,鼠标光标悬停,相当于mouseenter()与mouseleave()的组合
$( selector ).hover( enterFunction, leaveFunction );
4.13 jQuery动画效果
jQuery提供了很多动画效果
- 控制元素显示与隐藏
- 改变元素的透明度
- 改变元素高度
- 自定义动画
4.13.1 控制元素的显示及隐藏
show()方法控制元素的显示,hide()方法控制元素的隐藏
$( selector ).show( [duration] [, easing] [, complete] );
$( selector ).hide( [duration] [, easing] [, complete] );
duration规定显示效果的速度,可选值
- 毫秒值(如:1000)
- “slow”(600毫秒)
- “normal”(400毫秒,默认值)
- “fast”(200毫秒)
easing规定在动画的不同点上元素的速度,可选值
- “swing”:默认值,在开头/结尾移动慢,中间移动快
- “linear”:匀速移动
complete规定动画结束后要执行的方法,每个匹配元素的动画完成后都会调用一次
4.13.2 改变元素的透明度
fadeIn()和fadeOut()方法可通过改变元素的透明度实现淡入淡出效果
$( selector ).fadeIn( [duration] [, easing] [, complete] );
$( selector ).fadeOut( [duration] [, easing] [, complete] );
4.13.3 改变元素的高度
- slideDown()方法使元素逐步延伸显示
- slideUp()方法使元素逐步缩短直至隐藏
$( selector ).slideDown( [duration] [, easing] [, complete] );
$( selector ).slideUp( [duration] [, easing] [, complete] );
4.13.4 自定义动画
$( selector ).animate( properties [, duration] [, easing] [, complete] );
properties定义形成动画的CSS属性
BCSP-玄子前端开发之JavaScript+jQuery入门CH12_jQuery事件与动画