Jquery浅谈之讲解三

今天将和大家一起讨论下Jquery event handle，（事件处理），了解事件处理机制有助于我们更好的运用Jquery进行编程，更灵活的处理我们的要处理的内容和简化我的的事件处理代码，来了解下JQuery的simple event handle mechanism(简单事件处理机制)
           小试身手:
                $(function(){
                       var v1=$("body").children();
                      alert(v1);
                      alert(v1[3].innerHTML)
                });
              jquery对象和DOM对象简单的转换
                  $("p").next();//获取p元素同辈的下一个元素         $("p").prev();//获取p元素同辈的上一个元素
                   var p1=$("p").sibliings();//获取p元素的上下兄弟元素
                   p1.length;//在这里是jquery对象
                   p1[1].length;//在这里jquery对象已经转换成了DOM对象
       事件处理机制
                先讲解下  IE的  事件冒泡处理机制
                     对于IE的事件处理的执行都是由下往上寻找对象的事件处理
                 比如：如果我们在页面上有一个嵌套的div层，当我们点击里面的div层的时候，在没有阻止事件的传播的时候，我 们点击里面的div层，其实触发了两个click事件，因此会引发两次的事件处理机制
                 jquery中如果阻止事件的传播
                       $(("p").bind("click",function(event){
                             alert("show");
                               event.stopPropagation();//停止事件的传播，事件处理到这里将结束，不管这个元素属于那个子元素，其父元素的函数将不会再触发
                   });    
               
        事件方法链的处理模型          
              大家知道在Javascript中如果一个事件有多个函数，那么之后写的函数会覆盖前面的函数，执行最后写的一个函数，但是在Jquery中，一个事件可以执行多个函数，如下：
                     $(function(){
                             $("#btn").bind("click",function(){
                                      //调用第一个函数
                                       $("#test").append("<p>绑定第一个函数</p>");
                              }).bind("click",function(){
                                         $("#test").append("<p>绑定第二个函数</p>");
                              }).bind("click",function(){
                                          $("#test").append("<p>绑定第三个函数</p>");
                               });
                      });
           清除对象的绑定事件
                      $("#delAll").click(function(){
                               $("#test").unbind();//将这个$("#test")对象的所有绑定事件清除
                     });
                    //取消特定的绑定事件www.2cto.com
                       $(function(){
                                $("#btn").unbind("click",fun1);//取消这个fun1对象的绑定事件click事件
                 });
        $(function(){
                  $("#btn").bind("click",fun1=function(){
                                            //调用第一个函数
                                           $("#test").append("<p>绑定第一个函数</p>");
                                 }).bind("click",fun2=function(){
                                             //绑定第二个函数
                                             $("#test").append("<p>绑定第二个函数</p>");
                                }).bind("click"fun3=,function(){
                                             $("#test").append("<p>绑定第三个函数</p>")
                                });
                     });
 
 
----绑定事件，让事件只执行一次
                $(function(){
                           $("#btn").one("click"fun1=,function(){
                                   //调用第一个函数
                                    $("#test").append("<p>绑定第一个函数</p>");
                             }).one("click",fun2=function(){
                                     //调用第二个函数
                                      $("#test").append("<p>绑定第二个函数</p>");
                            });
              });
         
                 Jquery自定义事件机制
                             $(function(){
                                    $("#btn").bind("myClick",function(event,message1,message2){
                                              //给该对象绑定自定义myClick事件，传递二个参数
                                              ...想要做的操作
                                     });
                                      $("#btn").click(function(){
                                           $(this).trigger("myClick",["我的自定义","事件"]);//这个对象代理调用trigger的myClick事件
                                       }).trigger("myClick",["hello","world"]);
                            });
 
                同时绑定多个事件，调用同一个方法
                       $("div").bind("mouseover mouseout",function(){
                                      //可执行代码段
                         }); 
 
           以上通过对Jquery的事件了解我们很容易发现以前对于javascript事件处理的地方问题，在jquery中我们可以很容易的解决，通过使用jquery让我们对于dom的事件处理变的更加的灵活，下次我将和大家讲解jquery的简单动画，和AJAX处理
  
摘自  sharme的专栏