一、事件的绑定

1.事件的绑定介绍

事件绑定：

bind(type,fn) 　　给当前对象绑定一个事件。例如：A.bind("click",fn);类似A.click(fn)
unbind(type) 　　解绑bind事件
one(type,fn) 　　给当前对象绑定一次事件
on(type,fn) 　　提供绑定处理程序所需要的所有功能。完成3个方法的功能bond(),delegate()和live()
off(events) 　　解绑
trigger(type)　　在每一个匹配的元素上触发某类事件。例如：A.trigger("submit"),类似A.submit();
triggerHandler(type)　　在每一个匹配的元素上出发某类事件。但不会执行浏览器默认动作，也不会产生事件冒泡

事件委派

live(type,fn) 　　给一类对象绑定事件，之后动态添加的同样的成员也具有相同的事件。
die(type)　　解绑事件

事件切换

hover(over,out) 　　简化版，鼠标的移入移出A.hover(fn(移入)，fn(移出))
toggle(fn,fn,fn,...)　　执行click事件，每点击一次执行一个fn

2.代码实例

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 2 <html>

 3 <head>

 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 5 <title>Insert title here</title>

 6     <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

 7     <script type="text/javascript">

 8         $(function(){

 9 //            <input id="h01" type="button" value="1只能点击一次，之后失效" />

10             $("#h01").one("click",function(){

11                 alert("只能点一次哦");

12             });

13 //                <input id="h02" type="button" value="2可以点击多次" />

14             //jquery中事件绑定是可以使用别名的

15             $("#h02").bind("click.a",function(){

16                 alert("可以点多次哦111");

17             });

18             $("#h02").bind("click.b",function(){

19                 alert("可以点多次哦222");

20             });

21 //                <input id="h03" type="button" value="3解绑2" />

22             $("#h03").click(function(){

23                 $("#h02").unbind("click.b");

24             });

25 //                <input type="button" value="4 添加一个按钮，样式为myClass，且拥有相同的事件" class="myClass" />

26             $(".myClass").live("click",function(){

27                 $("body").append("<input type='button' value='克隆人' class='myClass'/>");

28             });

29 //                <input id="h05" type="button" value="5 解绑4"/>

30             $("#h05").click(function(){

31                 $(".myClass").die("click");

32             });

33         });

34     </script>

35

36 </head>

37 <body>

38     <input id="h01" type="button" value="1只能点击一次，之后失效" />

39     <input id="h02" type="button" value="2可以点击多次" />

40     <input id="h03" type="button" value="3解绑2" />

41     <input type="button" value="4 添加一个按钮，样式为myClass，且拥有相同的事件" class="myClass" />

42     <input id="h05" type="button" value="5 解绑4"/>

43 </body>

44 </html>

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 2 <html>

 3 <head>

 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 5 <title>Insert title here</title>

 6     <style type="text/css">

 7         #e02{

 8             border: 1px solid #000000;

 9               height: 200px;

10              width: 200px;

11         }

12

13     </style>

14     <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

15     <script type="text/javascript">

16         $(function(){

17             $("#e01").toggle(function(){

18                 alert("抱树1");

19             },function() {

20                 alert("抱树2");

21             });

22             $("#e02").hover(function() {

23                 $("#divMsg").html("移入");

24             },function(){

25                 $("#divMsg").html("移出");

26             })

27         });

28     </script>

29

30 </head>

31 <body>

32     <input id="e01" type="button" value="抱树" /><span id="textMsg"></span> <br/>

33     <hr/>

34     <div id="e02" ></div><span id="divMsg"></span> <br/>

35 </body>

36 </html>

巴特西

jQuery--事件绑定|委派|切换

一、事件的绑定

1.事件的绑定介绍

2.代码实例

最新文章

热门文章