jQuery学习笔记(5)-事件与事件对象
2016-03-24 21:03
756 查看
一、前言
主要讲解事件的绑定与触发二、jQuery中添加事件
1.使用bind()方法绑定事件
<input id="btn" type="button" value="按钮" /> <script> $("#btn").bind("click", function (event) { alert("one"); }); </script>
2.添加多播事件委托
<input id="btn" type="button" value="按钮" /> <script> $("#btn").bind("click", function (event) { alert("one"); }); $("#btn").bind("click", function (event) { alert("two"); }); </script>
3.jQuery事件处理函数
$("p").bind("click", function () { alert($(this).text()); }); | 为匹配元素的特定事件(像click)绑定一个事件处理器函数 |
$("p").one("click", function () { alert($(this).text()); }); | 为匹配元素的特定事件(像click)绑定一个一次性的事件处理函数 |
trigger( event, [data] ) | 匹配的元素上触发某类事件 |
triggerHandler( event, [data] ) | 触发指定的事件类型上所有绑定的处理函数 |
$("p").unbind( "click" ); | bind()的反向操作,从每一个匹配的元素中删除绑定的事件 |
三、常用事件函数
1.bind( type, [data], fn )注意方法签名上data参数,可以在事件处理之前传递一些附加的数据
(1)使用自定义元素属性存储数据
<div id="divMsg" contentType ="Children">这是小孩可以看的内容</div> <script> $("#divMsg").bind("click", function(event) { alert($(event.target).attr("contentType")); }); </script>
(2)使用脚本将数据传递给事件处理函数
<div id="divMsg">这是小孩可以看的内容</div> <script> $("#divMsg").bind("click", { contentType: "Children" }, function (event) { alert(event.data.contentType); }); </script>
2.one( type, [data], fn )
使用和bind()函数一样,但是只执行一次
[b]trigger( event, [data] ) 和 triggerHandler( event, [data] )[/b]
<button id="old">.trigger("focus")</button> <button id="new">.triggerHandler("focus")</button><br /> <br /> <input type="text" value="To Be Focused" /> <div id="divResult"></div> <script> $(function () { $("#old").click(function () { //点击文本框会聚焦 $("input").trigger("focus"); }); $("#new").click(function () { //点击文本宽不会聚焦 $("input").triggerHandler("focus"); }); }); </script>
四、快捷事件 Event Helpers
1.设置单击事件方式:
$("p").click(function (event) { alert("aa"); }); //等效于下面写法 $("p").bind("click", function (event) { alert("aa"); });
2.触发单击事件
$("p").click(); //等效于下面写法 $("p").trigger("click");
3.jQuery的快捷方法列表
blur( fn )/[b]blur( )[/b] | 当元素失去焦点时发生 blur 事件 |
change( fn )/[b]change( )[/b] | 当元素的值改变时发生 change 事件 |
click( fn )/[b]click( )[/b] | 当单击元素时,发生 click 事件 |
dblclick( fn )/[b]dblclick( )[/b] | 当双击元素时,发生 dblclick 事件 |
error( fn )/[b]error( )[/b] | 当元素遇到错误时,发生 error 事件 |
focus( fn )/[b]focus( )[/b] | 当元素获得焦点时,发生 focus 事件 |
keydown( fn )/[b]keydown( )[/b] | 当键盘键被按下时发生 keydown 事件 |
keypress( fn )/[b]keypress( )[/b] | 当键盘键被按下时发生 keydown 事件 |
keyup( fn )/[b]keyup( )[/b] | 当键盘键被松开时发生 keyup 事件 |
load( fn ) | 当指定的元素已加载时,会发生 load 事件 |
mousedown( fn ) | 当鼠标指针移动到元素上方,并按下鼠标左键时,会发生 mousedown 事件 |
mouseenter( fn ) | 当鼠标指针穿过(进入)被选元素时,会发生 mouseenter 事件 |
mouseleave( fn ) | 当鼠标指针离开被选元素时,会发生 mouseleave 事件 |
mousemove( fn ) | 当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件 |
mouseout( fn ) | 当鼠标指针离开被选元素时,会发生 mouseout 事件 |
mouseover( fn ) | 当鼠标指针位于元素上方时,会发生 mouseover 事件 |
mouseup( fn ) | 当鼠标指针移动到元素上方,并松开鼠标左键时,会发生 mouseup 事件 |
resize( fn ) | 当调整浏览器窗口大小时,发生 resize 事件 |
scroll( fn ) | 当用户滚动指定的元素时,会发生 scroll 事件 |
select( fn )/[b]select( )[/b] | 当 textarea 或文本类型的 input 元素中的文本被选择(标记)时,会发生 select 事件 |
submit( fn )/[b]submit( )[/b] | 当提交表单时,会发生 submit 事件 |
unload( fn ) | 当用户离开页面时,会发生 unload 事件 |
五、参考文章
http://www.cnblogs.com/zhangziqiu/archive/2009/05/06/jQuery-Learn-5.html相关文章推荐
- jQuery
- jquery 选择器,模糊匹配
- jQuery easyui 和 ueditor结合的问题
- jQuery 获取遍历获取table中每一个tr中的第一个td
- jQuery--checkbox全选/取消全选
- jquery 中json数组的操作 增删改
- jquery判断checkbox是否选中及改变checkbox状态
- 引入jquery
- jQuery-validate 表单验证
- Ajax实战项目2 验证用户的唯一性 环境(Ajax+Jquery+struts2)
- jquery 滚动到指定位置触发动画
- django debug toolbar jquery加载配置
- 清空form表单下所有的input值-------------jquery
- 城市选择 jQuery实现
- jquery
- jQuery - 疑惑
- jquery获得数组元素的下标
- 获取jquery类数组对象的下标
- jquery获取窗口高度的方法及判断scroll滚动到底部
- jquery两稳定版本比较~~