你的认同是对我最大的赞美。

jQuery中的事件

  JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。当文档或者它的元素发生某些变化或操作时,浏览器就会自动生成一个事件。例如,用户通过键盘在浏览器上打字时,就会生成一个事件。

  在常规的JavaScript中使用最多的是window.onload方法,而在jQuery中,使用最多的则是$(function(){})方法。$(function(){})方法是事件模块中最重要的一个函数,可以极大的提高Web应用程序的响应速度。在使用中需要注意window.onload和$(function(){})方法之间的区别。

  那么,它们的执行时机是什么?

  1.window.onload

    window.onload方法是在所有元素加载到浏览器后才开始执行(包括元素的所有关联文件)。

  2.$(function(){})

    通过jQuery中的$(function(){})注册的事件处理程序,在DOM完全就绪时就可以调用了。

  就好比一个网页加载图片,点击一张图片,使用window.onload必须等到所有图片加载完成后才可以能够进行操作。而使用$(function(){})方法,只要DOM准备就绪就可以进行操作了,不需要等待所有图片加载完毕。从而可以看出,$(function(){})方法在网页加载方面要比window.onload方法速度要更快。

  此外,需要注意,由于在$(function(){})方法内注册的事件,只要DOM就绪就会被执行,因此可能此时的关联文件并为下载完成。想要解决并不难,可以使用jQuery中另一个加载页面方法:load()方法。load()会在onload事件中绑定一个处理函数。如果处理函数绑定给window对象,则会在所有内容加载完成后触发,如果处理函数绑定在元素上,则会在元素加载完成后触发。jQuery代码如下,

1 $(function(){
2     //要执行的代码
3 });

等价于JavaScript中的代码,

1 window.onload=function(){
2    //要执行的代码 
3 };

  另外,两者的使用情况也不相同,JavaScript中的window.onload方法和jQuery中的$(function(){})方法的执行次数也不相同。window.onload方法在页面中只能有一个,而$(function(){})在页面中可以有多个。

 

  事件绑定和移除

  1.绑定事件

    在jQuery中,如果需要为匹配的元素同时绑定一个或者多个事件,可以使用bind()方法,语法如下:

    bind(type,[data],参数类型)

  bind()方法有三个参数,

    第一个参数是事件类型,类型包括:blur,focus,load,resize,seroll,unload,click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,moueseenter等。

    第二个参数为可选参数,可以省略。

    第三个参数用来绑定处理函数。

  下面说一下bind()的使用方法,代码如下:

1 $(function(){
2         //给div注册事件
3     $("div").bind("mouseover",function(){
4         //div变化的颜色
5         $(this).css("color","red");
6     });
7 });

 

  这里的this与JavaScript中的作用一样,this引用的是携带相应行为的DOM元素。为了能够使该DOM元素能够使用jQuery中的方法,可以使用$(this)转换为jQuery对象。

 

  通过上面的小例子就可以做成更多的好玩的小程序,下面就使用绑定事件来书写一个光棒效果,代码如下:

 1  $(function () {
 2              $("li").bind("mouseover",function () {
 3              //鼠标移动到当前jQuery对象时发生,字体改变为红色
 4                  $(this).css("color","red");
 5              //鼠标移开时发生,字体恢复到初始状态
 6              }).bind("mouseout",function () {
 7                  $(this).css("color","");
 8              });
 9  });
10 //body块代码
11 <ul>
12         <li>海贼王</li>
13         <li>火影忍者</li>
14     </ul>

  效果如下:

 当鼠标移开时“海贼王”会由当前的红色,变回原先的颜色。

 

  合成事件

  jQuery中有两个合成事件:hover()方法和toggle()方法。hover()方法和toggle()方法都属于jQuery自定义方法。

    1.hover()方法

      语法为:

      hover(enter,leave);

  hover()用于模拟鼠标悬停事件。当光标移动到元素上时会触发第一个函数(enter),当光标移除这个元素时会触发第二个函数(leave)。

  使用hover()方法实现光棒效果,代码如下:

1 1 $(function(){
2 2     $("div").hover(function(){
3 3     //将字体背景色换为黄色
4 4     $(this).css("background","yellow");
5 5     }).function(){
6         //鼠标移出时发生
7        $(this).css("background","");
8        }
9 6 });

  2.toggle()

    语法为:

  toggle(fn1,fn2,fn3....,fnN);

  toggle()方法用于模拟鼠标连续点击事件。第一次单击元素,触发第一个元素;再次点击时,触发第二个元素。如果有更多的元素,则依次触发,直到最后。

1 $(function(){
2     $("div").toggle(function(){
3         $(this).css("background","yellow");
4     }.function(){
5         $(this).css("background","");
6     })
7 });

使用toggle()方法不仅实现了同样的方法,同时还节省了代码量。

 

   事件冒泡

  1.什么是事件冒泡?

    在页面上有多个事件,也可以多个事件响应同一个事件。如,在网页上有两个元素,其中一个元素嵌套在另一个元素中,并且都被绑定了click事件。就好比公安机关,有情况必须得先经过你的队长,然后是大队长,在往上是局长等等,就可以称为冒泡。完整代码如下:

  

 1 <script type="text/javascript">
 2   $(function(){
 3       //为span元素绑定click事件
 4     $(“span”).bind("click",function(){
 5         var txt=$('#mysg').html()+"<p>span标签被单击</p>";
 6         $("mysg").html(txt);
 7     })
 8     //为div元素绑定click事件
 9     $(“#content”).bind("click",function(){
10         var txt=$('#mysg').html()+"<p>div标签被单击</p>";
11         $("mysg").html(txt);
12     })
13     //为body元素绑定click事件
14     $(“body”).bind("click",function(){
15         var txt=$('#mysg').html()+"<p>body标签被单击</p>";
16         $("mysg").html(txt);
17     })
18   })
19 </script>    
20 
21 <body>
22    <div id="concent">
23         外层div元素
24         <span>内部span元素</span>
25         外层div元素
26      </div>
27     <div id="mysg">
28     </div>
29 </body>    

 

  当单击内部<span>元素时,会触发<span>元素的click事件。 在单击<span>元素的同时,也单击了包含<span>元素的<div>元素和包含<div>元素的<body>元素,并且每一个都按照指定的顺序响应click事件。

 

  2.停止事件冒泡

    代码如下:

 

1 $(“span”).bind("click",function(even){//even事件对象
2         var txt=$('#mysg').html()+"<p>span标签被单击</p>";
3         $("mysg").html(txt);
4         even.stopPropgation();//停止冒泡
5     })

 

 

 

 

   移除事件

    在绑定事件的过程中,不仅可以为同一个元素绑定多个事件,也可以多个元素绑定一个事件。绑定多个事件使用代码如下:

 1 <script>
 2    $("#btn").bind("click",function(){
 3     $("#text").append("<p>span标签</p>");
 4    }.bind("click",function(){
 5     $("#text").append("<p>span标签</p>");
 6    }.bind("click",function(){
 7     $("#text").append("<p>span标签</p>");
 8    });
 9 </script>
10 <body>
11 <input type="button" id="btn" value="单击我" />
12 <div id="test"></div>
13 </body>
posted @ 2016-05-25 16:20  Tony_copper  阅读(558)  评论(0编辑  收藏  举报
 Tony