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