jQuery事件绑定机制完整版

1.1  jQuery事件

1.1.1   绑定

click/mouseenter/blur/keyup

// 绑定事件

bind：$node.bind(“click”,function(){});

// 触发一次

one : $node.one(“click”,function(){});

delegate :$node.delegate(“p”,”click”,function(){});

on： $node.on(“click”,”p”,function(){});

1.1.2   解绑

unbind、undelegate

off

1.1.3   触发

click  : $(“div”).click();

trigger：触发事件，并且触发浏览器默认行为

triggerHandler：不触发浏览器默认行为

注意：参数顺序不能变，但可省略

### 3.2
绑定事件的方式 bind方式（不推荐，1.7以后的jQuery版本被on取代，所以强烈推荐使用on方法）

+ 语法格式：.bind( eventType
[, eventData ],handler )  

+ 参数说明

    - 第一个参数：事件类型   
'click'   'mouseleave'

    - 第二个参数：传递给事件响应方法的数据对象，可以省略。 
一般省略

    - 事件响应方法中获取数据方式： e.data

    - 第三个参数：事件响应方法

+  **第二个参数可以省略。**

 

```

    例如：   

   $("p").bind("click", function(e){

        //事件响应方法

    });

```

 

 

### 3.3 delegate方式（推荐，性能高，支持动态创建的元素）

+ 语法格式：$(selector).delegate( selector, eventType,handler )

+ 语法说明：

    *
第一个参数:selector，子选择器

    *
第二个参数：事件类型

    *
第三个参数：事件响应方法

 

```

    例如：  

   $(".parentBox").delegate("p", "click",function(){

        //为.parentBox下面的所有的p标签绑定事件

    });

```

*优势：效率较高*

 

### 3.4 on方式（最现代的方式，兼容zepto，强烈建议使用的方式）

+ jQuery1.7版本后，jQuery用on统一了所有的事件处理的方法

+ 语法格式：$(selector).on( events
[,selector ] [, data ], handler )

+ 参数介绍：

    *
第一个参数：events，事件名

    *
第二个参数：selector,类似delegate

    *
第三个参数: 传递给事件响应方法的参数

    *
第四个参数：handler，事件处理方法

```

    例如：

    //绑定一个方法

    $( "#dataTabletbody tr" ).on( "click", function() {

      console.log( $( this).text() );

    });

 

    //给子元素绑定事件

    $( "#dataTabletbody" ).on( "click", "tr", function() {

      console.log( $( this).text() );

    });

 

    //绑定多个事件的方式  
（用json
的方法就行）

    $("div.test" ).on({

      click: function() {

        $( this).toggleClass( "active" );

      }, mouseenter:function() {

        $( this).addClass( "inside" );

      }, mouseleave:function() {

        $( this).removeClass( "inside" );

      }

    });

```

 

### 3.5 one绑定一次事件的方式

+ .one( events [, data ], handler )

```

    例如：

    $( "p").one( "click", function() {

      alert( $( this).text() );

    });

```

 

### 3.6
解绑事件

+ unbind解绑 bind方式绑定的事件(
在jQuery1.7以上被 on和off代替)

    *$(selector).unbind();         //解绑所有的事件

    *$(selector).unbind("click"); //解绑指定的事件

 

+ undelegate解绑delegate事件

    * $("p" ).undelegate();           //解绑所有的delegate事件

    * $("p" ).undelegate( "click" );   //解绑所有的click事件

   

```

    例如：

    var foo = function (){

      // Code to handlesome kind of event

    };

    

    // ... Now foo will becalled when paragraphs are clicked ...

    $( "body").delegate( "p", "click", foo );

    

    // ... foo will nolonger be called.

    $( "body").undelegate( "p", "click", foo );

```

 

+ off解绑on方式绑定的事件

    * $("p" ).off();

    * $("p" ).off( "click", "**" );    //
解绑所有的click事件，两个\*表示所有

    * $("body" ).off( "click", "p", foo );

   

```

    案例1：

    var foo = function() {

      // Code to handlesome kind of event

    };

    

    // ... Now foo will becalled when paragraphs are clicked ...

    $( "body").on( "click", "p", foo );

    

    // ... Foo will nolonger be called.

    $( "body").off( "click", "p", foo );

 

    案例2：（了解）解绑命名空间的方式：

    var validate =function() {

      // Code to validateform entries

    };

    

    // Delegate eventsunder the ".validator" namespace

    $( "form").on( "click.validator", "button", validate );

    

    $( "form").on( "keypress.validator", "input[type='text']", validate);

    

    // Remove eventhandlers in the ".validator" namespace

    $( "form").off( ".validator" );

```

 

### 3.7
触发事件

+ 简单事件触发

    *$(selector).click(); //触发 click事件

+ trigger方法触发事件

    * $("#foo" ).trigger( "click" );

+ triggerHandler触发事件响应方法，不触发浏览器行为

    * $("input" ).triggerHandler( "focus")