jquery中的事件管理

针对jquery中的一些事件理解：

一、DOM文档加载完。

在js中的方法是window.load=function(){} 和jquery中的$(function(){})

区别：

1、window.onload：是当DOM文档所有的（元素关联文件下载完毕之后），所有的元素加载完事之后进行执行。

2、jquery中的$(function(){})是当前DOM的树加载就绪就执行，不需要等待关联文件的是否下载完事。

3、在一个DOM文档中，多次使用window.load的，最终只会执行最后一个加载的函数。之前的函数会被最后一个函数覆盖掉。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="../static/js/jquery-2.1.1.min.js"></script>
 7 </head>
 8 <body>
 9 <h2>this is my  test!</h2>
10 <script>
11     window.onload=function () {
12         alert(1)
13     };
14     window.onload=function () {
15         alert(2)
16     };
17         window.onload=function () {
18         alert(3)
19     }
20 </script>
21 </body>
22 </html>

只会弹出3；

4、jquery中的$(function(){})不会出现这个情况。

 1 <script>
 2     $(function () {
 3         alert(1)
 4     }) ;
 5     $(function () {
 6         alert(2)
 7     });
 8     $(function () {
 9         alert(3)
10     })
11 </script>

依次显示我们的加载完的执行的函数。

注意：

1、如果我们在使用 $(function(){})的是时候，是不等待关联文件的是否下载完，如果我们绑定函数种有对关联文件的css的代码，会导致不生效。

这个时候请使用window.onload或者使用如下代码：当我们绑定的对象是window的时候，则会在所有的内容（包括窗口、框架、对象和图像等）记载完之后才执行！

1 $(window).load(
2 function(){
3 //code
4 }
5 )

或者：

1 window.onload=funtion(){}

二：bind绑定事件：

bind（type，data，fn）

type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。

data:作为event.data属性值传递给事件对象的额外数据对象

fn:绑定到每个匹配元素的事件上面的处理函数

例子：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="../static/js/jquery-2.1.1.min.js"></script>
 7     <style>
 8         .mod{
 9             display: none;
10         }
11     </style>
12 </head>
13 <body>
14 <h2 class="content">什么是爱情？</h2>
15 <p class="mod" >爱情就是2个发情的动物，产生暧昧！</p>
16 <script>
17     $(function () {
18         $('.content').bind('click',function () {
19             if ($('.mod').is(':visible')){
20                     $('.mod').hide()
21             }else {
22                 $('.mod').show()
23             }
24         })
25     })
26 </script>
27 </body>
28 </html>

效果：点击出现内容反之隐藏内容。

注意：

:visble jquery中的选择器。表示匹配可见的元素，如下的情况之外都是可见的。

1、display:none

2、type:hidden

3、隐藏的父元素，同时也隐藏所有的子元素。

is()：表示匹配的元素集合中至少有一个符合条件就返回true。

注意：当有相同的代码在选择器在你的代码中，请用变量来缓存下来！！这样在调用的时候更为快捷！

修改之后代码：

 1 <script>
 2     $(function () {
 3         $('.content').bind('click',function () {
 4             var tag=$('.mod');//将多次调用的选择器用变量的缓存！
 5             if (tag.is(':visible')){
 6                     tag.hide()
 7             }else {
 8                     tag.show()
 9             }
10         })
11     })
12 </script>

三：合成事件，hover()和toggle()

1、hover(entre，leave):用途鼠标的悬停和鼠标离开的事件。

当鼠标悬停的时候，执行函数entre，离开的时候执行leave.将上面的例子的进行修改，改成鼠标悬停显示反之隐藏。

代码：

 1 <script>
 2     $(function () {
 3         var tag=$('.mod');
 4         $('.content').hover(function () {
 5             tag.show();
 6         },function () {
 7             tag.hide();
 8         })
 9     })
10 </script>

效果：

2、toggle()

用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。即：点击第一次执行第一函数，二次第二个函数，以此类推。

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

轮流：在jquery1.9以后已经移除这个方法。所以需要注意选择的jquery的版本。

代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="jquery-1.8.2.min.js"></script>
 7 </head>
 8 <body>
 9 <button>每次显示不同内容</button>
10 <script>
11     $( function () {
12         $('button').toggle(
13                 function () {
14                     alert("第一次点击！")
15                 },
16                         function () {
17                              alert("第二次点击！")
18                         }
19 
20         )
21     })
22 </script>
23 </body>
24 </html>

效果：第一次点击：

第二次点击：

针对上次的例子进行修改：

点击的时候，第一次是显示第二次是关闭：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="jquery-1.8.2.min.js"></script>
 7     <style>
 8         .mod{
 9             display: none;
10         }
11     </style>
12 </head>
13 <body>
14 <h2 class="content">什么是爱情？</h2>
15 <p class="mod" >爱情就是2个发情的动物，产生暧昧！</p>
16 <script>
17     $( function () {
18         $('.content').toggle(
19                 function () {
20                    $('.mod').show()
21                 },
22                         function () {
23                              $('.mod').hide()
24                         }
25 
26         )
27     })
28 </script>

效果：点击的时候显示内容反之隐藏。

2、toggle第二功能是对元素的可见切换到隐藏，隐藏切换到可见，对上面的例子进行修改：

 1 <script>
 2     $( function () {
 3         $('.content').toggle(
 4                 function () {
 5                    $('.mod').toggle()
 6                 },
 7                         function () {
 8                              $('.mod').toggle()
 9                         }
10 
11         )
12     })
13 </script>

四：冒泡事件

情形：当一个标签包含子标签，而父标签和子标签都绑定事件的时候，会出现冒泡的情况。

代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="jquery-1.8.2.min.js"></script>
 7     <style>
 8         .mod{
 9             display: none;
10         }
11     </style>
12 </head>
13 <body>
14 <div id="oldest">
15     <div id="older">
16         <button id="old">最内层绑定</button>
17         第二层绑定
18     </div>
19     第三层绑定
20 </div>
21 <script>
22 $(function () {
23     $('#oldest').bind('click',
24             function () {
25                 alert('oldest')
26             }
27     )
28 });
29 $(function () {
30     $('#older').bind('click',
31             function () {
32                 alert('older')
33             }
34     )
35 });
36 $(function () {
37     $('#old').bind('click',
38             function () {
39                 alert('old')
40             }
41     )
42 })
43 
44 </script>
45 </body>
46 </html>

在点击最内层的时候，会依次出现：

即：从最内层，逐层到最外层。依次执行绑定事件。

点击任意元素都是从底到上顺序执行，所以叫做冒泡。称之为冒泡事件。

冒泡事件影响：

因为我们在不同的dom元素绑定事件希望是不要互相影响。

解决方法，比如上面的例子中，最内层的old不想受外面的影响。

在old对应绑定的元素添加：

1 $(function () {
2     $('#old').bind('click',
3             function (event) {
4                 alert('old');
5                 event.stopPropagation();
6             }
7     )
8 })

通过调用事件对象的方法：stopPropagation()方法来阻止当前事件不受冒泡影响。

我们可以调用：preventDefault()来阻止默认事件的发生。比如： button的类型为submit，点击默认提交都可以用这个来阻止。

 1 <body>
 2 <form>
 3     <input type="text">user:
 4     <input type="text">pwd:
 5     <button type="submit" id="oldest">提交</button>
 6 </form>
 7 
 8 <script>
 9     $(function () {
10         $('#oldest').bind('click',function (event) {
11             event.preventDefault();
12         })
13     })
14 
15 </script>

当我们点击的button当前的url并没有变化，也就说没有进行提交。

除了如上的，还可以在bind的第三参数加个false也是阻止默认事件的发生。

 1 <body>
 2 <form>
 3     <input type="text">user:
 4     <input type="text">pwd:
 5     <button type="submit" id="oldest">提交</button>
 6 </form>
 7 
 8 <script>
 9     $(function () {
10         $('#oldest').bind('click',function (event) {
11 
12         },false)
13     })
14 
15 </script>

3、或者直接return false 也可以阻止默认事件的发生

 1 <body>
 2 <form>
 3     <input type="text">user:
 4     <input type="text">pwd:
 5     <button type="submit" id="oldest">提交</button>
 6 </form>
 7 
 8 <script>
 9     $(function () {
10         $('#oldest').bind('click',function (event) {
11             return false
12         })
13     })
14 
15 </script>
16 </body>

五：解绑或者删除元素的事件。

解绑绑定事件可以用：unbind方法。

怎么解绑一个元素中多个绑定事件中其中一个呢？

我们需要给绑定事件中定义的匿名函数定义一个变量。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="jquery-1.8.2.min.js"></script>
 7     <style>
 8         .mod{
 9             display: none;
10         }
11     </style>
12 </head>
13 <body>
14 
15     <button id="oldest">提交</button>
16     <button id="del_fac">del_fac</button>
17 
18 
19 <script>
20     $(function () {
21         $('#oldest').bind('click',myclick=function (event) {
22             alert(1)
23         })
24     }) ;
25     $(function () {
26         $('#oldest').bind('click',myclick1=function (event) {
27             alert(2)
28         })
29     });
30     $(function () {
31         $('#del_fac').bind('click',function () {
32             $('#oldest').unbind('click',myclick1)
33         })
34     })
35 
36 </script>
37 </body>
38 </html>

再次点击del_fac标签将绑定匿名为：myclick1的函数去掉！！

posted @ 2017-02-04 18:04 evil_liu 阅读(215) 评论(0) 收藏举报

刷新页面返回顶部

evil_liu

jquery中的事件管理

公告