jquery可以监听事件。jquery提供多种监听事件方法:1、click(),可监听单击事件,并规定事件处理函数;2、change(),可监听改变事件,并规定事件处理函数;3、dblclick() ,可监听双击事件;4、hover()等。
本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。
jquery可以监听事件。
jquery中提供了多种监听事件的方法,例如click()、on()等方法。下面介绍一些方法。
1、click()方法:
click()方法规定当发生 click 事件时运行的函数
示例:单击
元素时警报文本
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function() { $("p").click(function() { alert("段落被点击了。"); }); }); </script> </head> <body> <p>点击这个段落。</p> </body> </html>
2、change() 方法
change() 方法规定当发生 change 事件时运行的函数。
示例:当 字段改变时警报文本
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function(){ $("input").change(function(){ alert("文本已被修改"); }); }); </script> </head> <body> <input type="text"> <p>在输入框写一些东西,然后按下 enter 键或点击输入框外部。</p> </body> </html>
3、dblclick()
dblclick() 方法规定当发生 双击 事件时运行的函数。
示例:双击
元素时警报文本
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function() { $("p").dblclick(function() { alert("这个段落被双击。"); }); }); </script> </head> <body> <p>双击这个段落。</p> </body> </html>
4、hover() 方法
hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
方法触发 mouseenter 和 mouseleave 事件。
示例:当鼠标指针悬停在上面时,改变
元素的背景颜色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function() { $("p").hover(function() { $("p").css("background-color", "yellow"); }, function() { $("p").css("background-color", "pink"); }); }); </script> </head> <body> <p>鼠标移动到该段落。</p> </body> </html>
监听事件的其他方法
方法 | 描述 |
---|---|
bind() | 向元素添加事件处理程序 |
blur() | 添加/触发失去焦点事件 |
delegate() | 向匹配元素的当前或未来的子元素添加处理程序 |
die() | 在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序 |
error() | 在版本 1.8 中被废弃。添加/触发 error 事件 |
focus() | 添加/触发 focus 事件 |
focusin() | 添加事件处理程序到 focusin 事件 |
focusout() | 添加事件处理程序到 focusout 事件 |
keydown() | 添加/触发 keydown 事件 |
keypress() | 添加/触发 keypress 事件 |
keyup() | 添加/触发 keyup 事件 |
live() | 在版本 1.9 中被移除。添加一个或多个事件处理程序到当前或未来的被选元素 |
load() | 在版本 1.8 中被废弃。添加一个事件处理程序到 load 事件 |
mousedown() | 添加/触发 mousedown 事件 |
mouseenter() | 添加/触发 mouseenter 事件 |
mouseleave() | 添加/触发 mouseleave 事件 |
mousemove() | 添加/触发 mousemove 事件 |
mouseout() | 添加/触发 mouseout 事件 |
mouseover() | 添加/触发 mouseover 事件 |
mouseup() | 添加/触发 mouseup 事件 |
off() | 移除通过 on() 方法添加的事件处理程序 |
on() | 向元素添加事件处理程序 |
one() | 向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次 |
resize() | 添加/触发 resize 事件 |
scroll() | 添加/触发 scroll 事件 |
select() | 添加/触发 select 事件 |
submit() | 添加/触发 submit 事件 |
trigger() | 触发绑定到被选元素的所有事件 |
triggerHandler() | 触发绑定到被选元素的指定事件上的所有函数 |
unbind() | 从被选元素上移除添加的事件处理程序 |
undelegate() | 从现在或未来的被选元素上移除事件处理程序 |
unload() | 在版本 1.8 中被废弃。添加事件处理程序到 unload 事件 |
contextmenu() | 添加事件处理程序到 contextmenu 事件 |
【推荐学习:jQuery视频教程、web前端视频】
以上是jquery可以监听事件吗的详细内容。更多信息请关注PHP中文网其他相关文章!