jquery基础学习之事件

文章是从官网整理，方便学习可以随意装载不需要注明作者！

   1，载入
    $(document).ready(function(){
        // 在这里写你的代码...
    });一般就是需要页面载入是就执行的操作，就直接用上面的代码，这样写的好处就是可以极大的提高web在应用程序中的响应速度。
　2，事件处理
    1 bind(type,[data],fn),这个就是为每个匹配元素的特定事件绑定时间处理函数
          .bind() 方法是用于往文档上附加行为的主要方式。所有JavaScript事件对象，比如focus, mouseover, 和 resize，都是
          可以作为type参数传递进来的 。
          .bind('click',fn)可以简写为.click(function()).
          .bind()最基本的用法是:
         　　  $('#foo').bind('click', function() {
                     alert('User clicked on "foo."');
                  });
                  简写就是$('#foo').click(function(){
                               alert('User clicked on "foo."');
                         });//为了更好的理解原理，下面就不再列出简写模式
                                            多个事件$('#foo').bind('mouseenter mouseleave', function() {
                   　                         　　　　　$(this).toggleClass('entered');
                              　            　　　　  });
                       fn可以像js的函数一样，可以接受一个参数，当这个函数被调用时，一个Js事件对象会作为一个参数传进来。 
 　　　　　　　　　　　　　　         $('#foo').bind('click', function(event) {
                                                          　　alert('The mouse cursor is at ('
                                                          + event.pageX + ', ' + event.pageY + ')');
       　　　　　　　　　　　　　                 });
                                                         　});
                           传递事件数据：var message = 'Spoon!';
                                                   $('#foo').bind('click', function() {
                                                      alert(message);
                                                    });
                                                     message = 'Not in the face!';
                                                     $('#bar').bind('click', function() {
                                                         alert(message);
                                                      });
                      特殊函数：当.bind 变成.one时，其他一样，只是这个函数只会被执行一次。
                      总结：type 含有一个或多个事件类型的字符串，比如"click"或"submit"，还可以是自定义事件名。
                                 data 作为event.data属性值传递给事件对象的额外数据对象
                                  fn 绑定到每个匹配元素的事件上面的处理函数
              　　    2trigger(type ,[data]),在每一个匹配的元素上触发某类事件，这个会导致浏览器的默认执行操作，例如提交表单之类的
                        $("p").click( function (event, a, b) {
                                 // 一个普通的点击事件时，a和b是undefined类型
                                 // 如果用下面的语句触发，那么a指向"foo",而b指向"bar"
                         } ).trigger("click", ["foo", "bar"]); 
                       特殊函数： triggerHandler(type ,[data])这个特 别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认

　　　　　　　动作， 也不会产生事件冒泡
                                   $("input").trigger("focus");
                                            });
                                   $("#new").click(function(){
                                   $("input").triggerHandler("focus");
  　　　　                          });
                                   $("input").focus(function(){
                                  $("<span>Focused!</span>").appendTo("body").fadeOut(1000);
        　　                         });
                        总结：type 一个事件对象或者要触发的事件类型
                                 data 传递给事件处理函数的附加参数
                         3unbind()就是第一个的反向操作，从每一个匹配的元素中删除绑定事件
                           $("p").unbind( "click" )
     3 事件委派
                           1 live（type,[data],fn）给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
                                      简单说就是一个附加的函数添加之后可以用这个函数直接使用
                                    $('body').append('<div class="clickme">Another target</div>');  
                                    $('.clickme').live('click', function() {
                                            alert("Live handler called."); 
                                         });
                                        阻止默认行为
                                    $("a").live("click", function(event){
                                     event.preventDefault();
　　　                            });
                               2die(type,fn)所有绑定的live事件都会被移除
                                      function aClick() {
　　                                          $("div").show().fadeOut("slow");
                                        }
                                            $("#unbind").click(function () {
                                                   $("#theone").die("click", aClick)
                                            }
         4 事件切换
                           1 hover 就是css中的hover，在移动端用的很多
                                      $("td").hover(
                                            function () {
                                                    $(this).addClass("hover");
                                             },
                                             function () {
                                                    $(this).removeClass("hover");
                                             }
                                        );
                              总结：就是要记住语法，实际中在移动端很好用，必须要有两个状态才可以
                           2 toggle（fn，fn2，，，）如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二

　　　　　　　　　个函数，
                              如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。 
                              $("td").toggle(
                                    function () {
                                        $(this).addClass("selected");
                                    },
                                    function () {
                                        $(this).removeClass("selected");
                                    }
                               );