jQuery 事件
jQuery 是为事件处理特别设计的。
什么是事件?
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例:
- 在元素上移动鼠标。
- 选取单选按钮
- 点击元素
在事件中经常使用术语"触发"(或"激发")例如: "当您按下按键时触发 keypress 事件"。
常见 DOM 事件:
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload | |
| hover |
jQuery 事件方法语法
在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件:
下一步是定义了点击后触发事件。您可以通过一个事件函数实现:
常用的 jQuery 事件方法
$(document).ready()
$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法 章节中已经提到过。
click()
click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
在下面的实例中,当点击事件在某个 <p> 元素上触发时,隐藏当前的 <p> 元素:
dblclick()
当双击元素时,会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件,或规定当发生 dblclick 事件时运行的函数:
mouseenter()
当鼠标指针穿过元素时,会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件,或规定当发生 mouseenter 事件时运行的函数:
mouseleave()
当鼠标指针离开元素时,会发生 mouseleave 事件。
mouseleave() 方法触发 mouseleave 事件,或规定当发生 mouseleave 事件时运行的函数:
mousedown()
当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。
mousedown() 方法触发 mousedown 事件,或规定当发生 mousedown 事件时运行的函数:
mouseup()
当在元素上松开鼠标按钮时,会发生 mouseup 事件。
mouseup() 方法触发 mouseup 事件,或规定当发生 mouseup 事件时运行的函数:
hover()
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)。
实例
尝试一下 »
focus()
当元素获得焦点时,发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。
focus() 方法触发 focus 事件,或规定当发生 focus 事件时运行的函数:
blur()
当元素失去焦点时,发生 blur 事件。
blur() 方法触发 blur 事件,或规定当发生 blur 事件时运行的函数:
yuanchaowhut
yua***aowhut@126.com
一.keypress,keydown,keyup的区别:
二.两种常用用法举例
案例1:获取按键代码或字符的ASCII码
$(window).keydown( function(event){ // 通过event.which可以拿到按键代码. 如果是keypress事件中,则拿到ASCII码. } );案例2:传递数据给事件处理函数
语法:
举例:
// 只允许按下的字母键生效, 65~90是所有大写字母的键盘代码范围. var validKeys = { start: 65, end: 90 }; $("#keys").keypress( validKeys, function(event){ var keys = event.data; //拿到validKeys对象. return event.which >= keys.start && event.which <= keys.end; } );yuanchaowhut
yua***aowhut@126.com
Cinema
320***7017@qq.com
关于获取触发事件的说明:
1. 获取事件对象
$(document).ready(function(){ $(window).keypress(function(event){ //获取事件对象,里面包含各种有用的信息。 console.log(event); //console.log(event.which); }); });2. keypress事件获取键入字符
$(window).keypress(function(event){ //event.which是获取ASCII码,前面的函数是将ASCII码转换成字符,空格键和Enter键输出均为空白。 console.log(String.fromCharCode(event.which)); //从event对象中key属性获取字符,但是Enter键的key值为"Enter",空白键还是空白" "。 console.log(event.key); });Cinema
320***7017@qq.com
麦当很努力
211***651@qq.com
window.onload = function(){} 用于整个网页(包括图片等)加载完毕后执行方法内代码块。
$(document).ready(function(){}) 用于 DOM 结构加载完毕后就可以执行方法内代码块,由此得出,onload 是在 ready 后执行。
麦当很努力
211***651@qq.com