jquery事件绑定 on() bind() live() delegate()

2019独角兽企业重金招聘Python工程师标准>>>

on()方法

    在被选元素及子元素上添加一个或多个事件处理程序

    自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。
    语法：

$(selector).on(event,childSelector,data,function)

event	必需。规定要从被选元素移除的一个或多个事件或命名空间。 由空格分隔多个事件值，也可以是数组。必须是有效的事件。
childSelector	可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data	可选。规定传递到函数的额外数据。
function	可选。规定当事件发生时运行的函数。

•     单事件处理

  $(selector).on("click",childselector,data,function);
  $(".header").on("click", ".btn-test", function () { });

   

•     多事件处理  
  1.利用空格分隔多事件

   $(selector).on("click dbclick mouseout",childseletor,data,function);
    $(".header").on("mouseout click", ".btn-test", function () { });

  
  2.利用大括号灵活定义多事件 

  $(selector).on({event1:function, event2:function, ...},childselector);
      $(".header").on({
         "mouseout": function () { alert("这是mouseout事件!"); }, 
         "click": function () { $(".container").slideToggle(); } 
       }, ".btn-test");

   

• 传入数据

  function greet( event ) {alert( "Hello " + event.data.name );}
  $( "button" ).on( "click", {name: "Karl"}, greet );
  $( "button" ).on( "click", {name: "Addy"}, greet );

   

off()方法

    off() 方法通常用于移除通过on() 方法添加的事件处理程序。
    自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。
    提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。
    语法：

$(selector).off(event,selector,function(eventObj),map)

event	必需。规定要从被选元素移除的一个或多个事件或命名空间。 由空格分隔多个事件值。必须是有效的事件。
selector	可选。规定添加事件处理程序时最初传递给 on() 方法的选择器。
function(eventObj)	可选。规定当事件发生时运行的函数。
map	规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

 

bind() live() delegate()方法

（bind() , delegate()3.0被标记弃用   live()1.7被标记弃用，1.9被移除）

bind() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。
语法：

$(selector).bind({event:function, event:function, ...})

event	必需。规定添加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。
data	可选。规定传递到函数的额外数据。
function	必需。规定当事件发生时运行的函数。
map	规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

bind()基本用法：
   

 $('#foo').bind('click', function() {
      alert('User clicked on "foo."');
    });

 

 $('#foo').bind('mouseenter mouseleave', function() {
      $(this).toggleClass('entered');
    });

 

$('#foo').bind({
         click: function() { // do something on click   }, 
        mouseenter: function() {// do something on mouseenter }
     });

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
语法：$(selector).delegate(childSelector,event,data,function)

childSelector	必需。规定要添加事件处理程序的一个或多个子元素。
event	必需。规定添加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。
data	可选。规定传递到函数的额外数据。
function	必需。规定当事件发生时运行的函数。

$("table").delegate("td", "click", function() {
  $(this).toggleClass("chosen");
});
//等价于
$("table").on("click", "td", function() {
  $(this).toggleClass("chosen");
});

live() 方法为被选元素添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
通过 live() 方法添加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。
旧版本的jQuery中用户，应优先使用.delegate()来取代.live()。
语法：$(selector).live(event,data,function)

event	必需。规定添加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。
data	可选。规定传递到该函数的额外数据。
function	必需。规定当事件发生时运行的函数。

.live() 方法与其它事件方法的相互影响是会令人感到惊讶的。例如，$(document).unbind("click") 会移除所有通过 .live() 添加的 click 事件!
在 jQuery 1.7 之前，如果想阻止通过 .live() 绑定的事件被冒泡到其它元素上，必须在事件处理中返回 false。调用 .stopPropagation() 是不起作用的。
从 jQuery 1.4 开始，.live() 方法支持自定义事件，也支持所有 JavaScript 事件冒泡。它还支持一些原本不能冒泡的事件，包括 change, submit, focus 和 blur。
在 jQuery 1.3.x 中，只能绑定如下 JavaScript 事件：click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.

转载于:https://my.oschina.net/u/3759734/blog/1605497