JQuery四：JQuery事件常用方法

1.$(selector).event(handler);

2.$(selector).bind(event[,data],handler(eventObject));    //event可以设置多个事件，用空格隔开；data为JSON格式的字符串，在方法中可以用eventObject.data.argname方式来使用。

   $(selector).bind({event1:handler(){},event2:handler2(){},....});   //绑定多个事件

   $(selector).bind(event[,data],preventBubble);  //preventBubble如果为false则取消事件默认处理并停止传递该事件到其上级元素，等同handler里面返回false，默认为true

   $(selector).unbind(event[,handler(eventObject)]);    //取消通过bind绑定事件handler

3. $(selector).live(events[,data],handler(eventObject));  //绑定handler到selector对应的元素上面，包括后来动态添加的符合条件的元素，在JQuery1.9中被删除。

    $(selector).die(events[,handler(eventObject));  //删除通过live绑定的事件处理handler

    备注：

    a.live并不直接绑定handler到具体的符合条件的元素事件上，而是绑定到html文档根document上面，在事件广播到根部document上的时候，会检验事件广播路径中元素是否符合条件，如果符合则调用其handler，从live处理机制可以看出能够支持运行时动态添加的符合条件的元素。

    b.调用live方法效率低下，主要有两点：一是在调用live方法的时候系统会扫描并记录document下面所有符合条件的元素，如果文档过大会导致内存消耗过大且效率低下，第二是handler默认绑定到document，所以事件广播到根部的时候才能够执行，事件响应时间过长。

    c.如果事件广播到根部过程如果某个元素处理handler中调用了eventObject.stopPropagation或者返回false,则会中断事件广播，最终导致document接收不到event而没有执行handler，从另外一个方面来说，在live绑定的handler中返回false或者调用eventObject.stopPropagation除了去除默认处理外也达不到终止广播的意图，因为该事件已经传递到根部document上。

    d.在大部分的移动系统上面并不支持事件广播到根部document级别上面，所以使用live也会失效。

    e.live不支持方法链，如$( "a" ).find( ".offsite, .external" ).live( ... )不会有效。

     f.live会与其他事件绑定方法相互干扰，例如off方法也会取消通过live绑定的事件处理。

4. $(container).delegate(childSelector,eventTypes[,eventData],handler(eventObject));  //绑定子元素的事件与处理handler，支持动态添加元素。

    $(contianer).undelegate(childSelector,eventTypes);  //取消通过delegate的绑定处理。

    备注：

    delegate与live处理机制相似，但改进了一些live方法的弊端，主要体现在下面几点不同上面：

    a.delegate并不绑定到document上，而是container上面，所以其效率及响应时间会优于live.

    b.delegate在调用的时候并不登记及扫描文档中符合条件的子元素，只是在接受到事件的时候才会检验。

    除了上面两点外live其它的问题delegate同样存在，例如eventObject.stopPropagation的调用等等。

5. $(selector).on(event[,childselector][,data],handler(eventObject));   

    $(selector).off(event[,childselector][,handler(eventObject));   //取消on方法绑定的handler

    备注：on是最新版本的事件绑定方法，集成了所有的事件绑定方法(bind,live,delegate) 
                 没有参数childselector则等同于bind方法，如果存在参数childselector则等同于delegate方法

6.$(selector).one(event[,childselector][,data],handler(eventObject));   //用法同on,唯一区别是绑定的每个元素每个事件其handler最多只能执行一次，执行后其事件不再有效。

7.$(selector).toggle(handler(eventObject),handler(eventObject)[,handler(eventObject));  //绑定两个或者多个handler到click事件，当click元素的时候这些handler轮询执行（在js1.9后该方法被删除，不被支持）。

8. $(selector).trigger(event[,extraParameters]);  //触发selector对应元素的event事件。

    //定义及触发自定义事件示例  

   var event = jQuery.Event("logged");
   event.user = "foo";
   event.pass = "bar";
   $( "body" ).trigger( event );

   //或者下面方法

   $( "body" ).trigger({
     type:"logged",
     user:"foo",
     pass:"bar"
   });

9 $(selector).triggerHandler 用法同trigger,但是与trigger有如下差异：

   a.triggerHandler不会触发事件的默认处理，例如focus,form submit等等。

   b.trigger会执行所有与selector匹配上的元素对应事件，但是triggerHandler仅仅触发第一个匹配上元素对应事件

   c.triggerHandler仅仅触发与元素直接绑定的事件，而不会考虑DOM树传递事件，也就是说通过live及delegate绑定的事件是不会被执行的。

   d.handler返回参数处理方式不一样。

10. event对象

    (1), 创建事件对象：var eventObj = jQuery.Event("click"[,{specialProp:val,specialProp2:val2}]); //传递事件的特殊属性。

    (2). 触发事件：$(selector).trigger(eventObj);

    (3). currentTarget, delegateTarget, target三属性区别：currentTarget指定是与当前执行handler对应的元素，delegateTarget指的是事件绑定元素，target指定的是触发事件最原始的元素，也就是事件根源属性，及dom链中最深最底层元素。如果通过bind方法绑定的event，则currentTarget与delegateTarget相同，如果是通过live绑定的事件则其delegateTarget则为document，currentTarget则为selector对应的正在执行的子元素。

    举例如下：

                       <div id="div1"><p id=”plParent"><lable id="lb">click me!</lb></p></div>

                       ....

                      $(body).delegate("click","p#plParent",function(eventObj){

                           console.log("current target:"+eventObj.currentTarget.id);   //输出：plParent

                           console.log("delegate target:"+eventObj.delegateTarget.id); //输出：div1

                           console.log("target:"+eventObj.target.id);  //输出：lb

                      });

    (4). event.data：触发事件通过json字符串方式传递进来的附加属性。

    (5). event.namespace：被触发事件的命名空间，例如 trigger("click.mynamespace")，其命名空间为mynamespace。

    (6). event.pageX, event.pageY：触发事件时候鼠标相对于document(或者iframe)的位置(注意是document而不是事件源头元素)

    (7). event.preventDefault()：禁止事件默认处理操作执行，例如<a>click操作的默认操作是跳转到其它指定的页面。

           event.isDefaultPrevented()：判断preventDefault()方法是否被调用。

    (8). event.stopImmediatePropagation()：除了阻止当前执行元素绑定的其他handler执行外，还禁止事件到广播到上层元素。

           event.isImmediatePropagationStopped()：判断方法stopImmediatePropagation()方法是否被执行。

    (9). event.stopPropagation()：阻止事件广播到上层元素，与stopImmediatePropagation的区别在于不禁止当前元素的其它handler执行。

           event.isPropagationStopped()：判断方法stopPropagation是否被执行。

    (10).event.result：触发事件元素的最后一次handler返回值，如果没有返回则为undifined. 

    (11).event.type：事件类型，如”click"等。   

10.其它一些名称：

    直接事件/代理事件（direct/delegate event）

    事件名字及命名空间（event name and namespace）