3.5 jQuery事件相关方法
jQuery
对JavaScript
事件模型进行了简化,提供了一致的事件模型,从而允许开发者以更简洁的方式进行事件编程。
3.5.1 绑定事件处理函数
jQuery
为事件编程提供了如下方法。
事件处理方法介绍
ready方法
方法 |
描述 |
ready(function()) |
指定当jQuery 所对应的DOM 对象装载完成时执行function() 函数。在function 函数中可以为jQuery 函数起个别名,这样可避免多个JavaScript 库并存时的命名冲突。 |
这个函数一个常见的使用场景是$(document).ready(function(){...});
,这行代码指定在页面装载完成时立即执行ready()
方法里指定的函数。
- 值得指出的是,一定要保证在
<body>
元素中没有指定onload
属性,否则不会触发$(document).ready()
里指定的函数。
- 同一个页面中可以无限次地调用
$(document).ready()
方法,多次注册的函数会按照(代码中的)先后顺序依次执行。
on方法
方法 |
描述 |
on(events [,selector] [,data],function(eventObject)) |
为当前jQuery 对象中匹配selector 的所有子元素的一个或多个事件绑定事件处理函数handler 。 |
其中事假处理函数handler
是一个形如function(event){}
的函数,其中event
表示触发该函数的事件;data
是个可选参数,它是个形如{key1:value1,key2:value2...}
的对象。函数function
可通过event.data
来访问data
对象,通过指定data
,可以向事件处理函数传入更多数据。
对于on
方法的时间处理函数handler
,
- 如果该函数想同时阻止事件的默认行为和事件冒泡,则让该函数返回
false
即可;
- 如果只想取消默认行为,则调用
event
的preventDefault()
方法即可;
- 如果只想阻止冒泡,则调用
event
的stopPropagation()
方法即可。
off方法
方法 |
描述 |
off(events [,selector] [,handler(eventObject)]) |
这是on() 方法的反向操作,它用于从当前jQuery 对象包含的DOM 元素中删除绑定的事件处理函数。该函数的selector 、handler 两个参数都是可选的,如果没有指定任何参数,则删除jQuery 对象中所有DOM 元素上的事件处理函数;如果指定了selector ,则只删除匹配selector 的DOM 元素上的事件处理函数;如果指定了handler ,则只删除该事件处理函数。 |
### unbind方法 ### |
|
unbind() 方法能够移除所有的或被选的事件处理程序 ,或者当事件发生时终止指定函数的运行。ubind() 适用于任何通过jQuery 附加的事件处理程序。 |
|
#### 没有参数的情况 #### |
|
如果没有规定参数,unbind() 方法会删除指定元素的所有事件处理程序。 |
|
代码示例: |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function(){ $(this).slideToggle(); }); $("button").click(function(){ $("p").unbind(); }); }); </script> </head> <body> <p>这是一个段落。</p> <p>这是另一个段落。</p> <p>点击任何段落可以令其消失。包括本段落。</p> <button>删除 p 元素的事件处理器</button> </body> </html>
|
|
|
两个参数的情况
方法 |
描述 |
$(selector).unbind(event,functionName) |
event 参数是可选的,event参数规定删除元素的一个或多个事件,由空格分隔多个事件值。如果只规定了该参数,则会删除绑定到指定事件的所有函数。functionName 可选。规定从元素的指定事件取消绑定的函数名。 |
代码实例: |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> function alertMe() { alert("Hello World!"); }
$(document).ready(function(){ $("p").click(alertMe); $("button").click(function(){ $("p").unbind("click",alertMe); }); }); </script> </head> <body> <p>这是一个段落。</p> <p>这是另一个段落。</p> <p>点击任何段落可以触发一个提示框。包括本段落。</p> <button>从 p 元素的 click 事件删除提示框函数</button> </body> </html>
|
|
|
Event对象来作为参数的情况
方法 |
描述 |
$(selector).unbind(eventObject) |
这个eventObject 参数是一个Event 对象,一般来自事件绑定函数,该方法用于对自身内部的事件取消绑定(比如当事件已被触发一定次数之后,删除事件处理程序) |
程序示例: |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ var x=0; $("p").click(function(e){ $("p").animate({fontSize:"+=5px"}); x++; if (x>=2) { $(this).unbind(e); } }); }); </script> </head> <body> <p style="font-size:20px;">点击这个段落可以增加其大小。只能增加两次。</p> </body> </html>
|
|
|
注意
jQuery 3.0
删除了bind()
方法、delegate()
方法,使用on()
方法来代替这两个方法,删除了unbind()
方法、undelegate()
方法,使用off()
方法来代替这两个方法。
one方法
方法 |
描述 |
one(type,data,function) |
该方法与bind() 方法的作用基本一致。与bind 的区别是,无论如何,one绑定的事件处理函数只会执行一次。也就是说,使用one() 绑定的事件处理函数被激发一次后,jQuery 将会解除one() 方法绑定的事件处理函数。 |
### trigger方法 ### |
|
方法 |
描述 |
trigger(type,[data]) |
以编程方式触发当前jQuery 对象包含的所有DOM 对象上的type 事件,该方法可以触发由bind() 绑定的自定义事件。除此之外,该函数也会导致DOM 元素执行同名的事件动作。 |
例如我们使用trigger()
触发一个表单的submit
事件,则该表单将会被提交(如果要阻止这种默认行为,可让事件处理函数返回false
)。data
是一个可选的数组类型的参数,可以将该参数传给绑定在DOM
对象上的事件处理函数。
triggerHandler方法
方法 |
描述 |
triggerHandler(type,[data]) |
该方法与trigger 的作用基本相似,只是调用该方法来触发type 事件时,不会导致DOM 元素执行同名的事件动作。 |
### hover方法 ### |
|
方法 |
描述 |
hover(over,out) |
该方法为当前jQuery 对象包含的每个DOM 元素的onmouseover 、onmouseout 事件绑定事件处理函数。其中over 、out 都是函数,分别绑定到onmouseover 、onmouseout 事件上作为事件处理函数。 |
### toggle方法 ### |
|
方法 |
描述 |
toggle([speed],[easing],[function]) |
切换jQuery 对象包含的DOM 元素的显示/隐藏状态。其中speed 参数指定”隐藏/显示”动画效果的速度,默认是0ms ,可能的值包括slow 、normal 、fast ;easing 参数指定切换效果,默认是swing 字符串,也可指定为linear 字符串。function 为在动画完成时执行的函数,每个元素的动画完成后执行一次function 函数。此外,该方法还支持传入一个boolean 参数值,用于控制元素的显示、隐藏,其中true 表示显示,false 表示隐藏。 |
|
|
程序示例
下面的程序示范了以上几个绑定事件处理函数的用法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
| <!DOCTYPE html> <html>
<head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 事件编程相关的方法 </title> </head>
<body> <input id="test1" type="button" value="单击我" /> <br /> <input id="test2" type="button" value="切换右边复选框的勾选状态" /> <input id="check" type="checkbox" value="" /> <br /> <input id="test3" type="button" value="激发toggle" /> <br /> <div id="tg" style="width:300px;height:120px;background-color:gray;"> </div>
<script type="text/javascript" src="../jquery-3.1.1.js"> </script> <script type="text/javascript"> $(document).ready(function () { alert("页面加载完成!"); });
$("#test1").on("click", { book: "疯狂前端开发讲义" } , function (event) { alert("id为test1的按钮被单击!\n" + "事件为:" + event + "\n事件上data的book属性为:" + event.data.book); });
$("#test2").on("click", function (event) { $("#check").trigger("click"); }); $("#test3").on("click", function (event) { $("#tg").toggle("slow", "linear", function () { console.log("动画完成!") }); }); </script> </body>
</html>
|
原文链接: 3.5 jQuery事件相关方法 3.5.1 绑定事件处理函数