jquery中.bind(),.live(),.delegate(),.on().one()的参数及版本

最新推荐文章于 2021-09-09 11:47:41 发布

原创最新推荐文章于 2021-09-09 11:47:41 发布 · 694 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery中.bind #.live #.delegate #.on.one的参数及版本

jquery 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了jQuery中五种事件绑定方法：bind、live、delegate、on及one的使用方法及语法，包括各版本的新增特性，并附有示例代码。

原文:

http://api.jquery.com/bind/

http://api.jquery.com/live/

http://api.jquery.com/delegate/

http://api.jquery.com/on/

http://api.jquery.com/one/

1.bind

.bind( eventType [, eventData ], handler ) version added: 1.0

function handler( event ) {
  alert( event.data.foo );
}
$( "p" ).bind( "click", {
  foo: "bar"
}, handler );

.bind( eventType [, eventData ] [, preventBubble ] ) version added: 1.4.3

$( "form" ).bind( "submit", function() {
  return false;
})

bind( events ) version added: 1.4

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

2.live version deprecated: 1.7, removed: 1.9

.live( events, handler ) version added: 1.3

$( "a" ).live( "click", function() {
  return false;
});

.live( events, data, handler ) version added: 1.4

function handler( event ) {
  alert( event.data.foo );
}
$( "p" ).live( "click", {
  foo: "bar"
}, handler );(原文无)

.live( events ) version added: 1.4.3

$( "p" ).live({
  click: function() {
    $( this ).after( "<p>Another paragraph!</p>" );
  },
  mouseover: function() {
    $( this ).addClass( "over" );
  },
  mouseout: function() {
    $( this ).removeClass( "over" );
  }
});

3.delegate()

.delegate( selector, eventType, handler ) version added: 1.4.2

$( "table" ).delegate( "td", "click", function() {
  $( this ).toggleClass( "chosen" );
});

.delegate( selector, eventType, eventData, handler ) version added: 1.4.2

.delegate( selector, events ) version added: 1.4.3

4.on() version added: 1.7

.on( events [, selector ] [, data ], handler ) version added: 1.7

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

.on( events [, selector ] [, data ] ) version added: 1.7

$( "table" ).on( "click", "td", function() {
  $( this ).toggleClass( "chosen" );
});

5.one()

.one( events [, data ], handler ) version added: 1.1

$( "#foo" ).one( "click", function() {
  alert( "This will be displayed only once." );
});

.one( events [, selector ] [, data ] ) version added: 1.7

.bind(),.delegate(),.one()源码 version:2.1.1

参考:

http://code.jquery.com/jquery-2.1.1.js

	bind: function( types, data, fn ) {
		return this.on( types, null, data, fn );
	},

	delegate: function( selector, types, data, fn ) {
		return this.on( types, selector, data, fn );
	},

	one: function( types, selector, data, fn ) {
		return this.on( types, selector, data, fn, 1 );
	},