.delegate()

类别：已淘汰 > 淘汰于3.0 | 事件 > 事件处理函数附件

.delegate( selector, eventType, handler )返回类型：jQueryversion deprecated: 3.0

描述：基于特定的根元素集合，针对匹配选择器的所有元素，无论是现在匹配的元素还是未来匹配的元素，对一个或多个事件附加一个处理函数。

  • 增补版本：1.4.2.delegate( selector, eventType, handler )

    • selector
      类型：String
      一个选择器，用来筛选触发事件的元素。
    • eventType
      类型：String
      一个字符串，包含了一个或多个用空格隔开的JavaScript事件类型，譬如“click”或“keydown”或自定义事件名称。
    • handler
      类型：Function( Event eventObject )
      事件被触发时要执行的函数。

  • 增补版本：1.4.2.delegate( selector, eventType, eventData, handler )

    • selector
      类型：String
      一个选择器，用来筛选触发事件的元素。
    • eventType
      类型：String
      一个字符串，包含了一个或多个用空格隔开的JavaScript事件类型，譬如“click”或“keydown”或自定义事件名称。
    • eventData
      类型：Anything
      一个对象，包含要传递给事件处理函数的数据。
    • handler
      类型：Function( Event eventObject )
      事件被触发时要执行的函数。

  • 增补版本：1.4.3.delegate( selector, events )

    • selector
      类型：String
      一个选择器，用来筛选触发事件的元素。
    • events
      类型：PlainObject
      是一个或多个事件类型以及针对它们执行的函数构成的扁平对象。

自从jQuery 3.0以来，.delegate()已经被淘汰了。从jQuery 1.7开始，.on()方法取代了它，所以早已经不建议使用它。然而，对于早期版本，它依然是使用事件委托的最有效的方法。关于事件绑定和委托的更多信息在.on()方法中。总而言之，下面是针对这两种方法的等效的模板：

1
2
3
4
 
// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );

例如，下面的.delegate()代码：

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

等同于下面的用.on()写的代码：

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

若要删除用delegate()方法附加的事件，请参阅.undelegate()方法。

传递和处理事件数据的作用方式与.on()相同。

补充说明：

  • 因为只有事件传播到文档的顶部，.live()方法才会处理事件，所以它不能阻止活动事件的传播。类似的，由.delegate()处理的事件将传播到它们委托的元素，所以绑定到DOM树中它下面的任何元素的事件处理函数将在此委托事件处理函数被调用之前执行。因此，这些处理函数，可以通过调用event.stopPropagation()或返回false来防止委托处理函数被触发。

示例：

点击一个段落以添加另一个段落。请注意，.delegate()把一个点击事件处理函数附加到所有的的段落——哪怕是新生成的段落。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>delegate demo</title>
  <style>
  p {
    background: yellow;
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
  }
  p.over {
    background: #ccc;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Click me!</p>
 
<span></span>
 
<script>
$( "body" ).delegate( "p", "click", function() {
  $( this ).after( "<p>Another paragraph!</p>" );
});
</script>
 
</body>
</html>

演示：

每当点击段落的时候，在警告框中显示每个段落的文本：

1
2
3
 
$( "body" ).delegate( "p", "click", function() {
  alert( $( this ).text() );
});

若要撤销默认动作并防止它向上冒泡，请返回false：

1
2
3
 
$( "body" ).delegate( "a", "click", function() {
  return false;
});

用preventDefault()方法，撤销默认动作。

1
2
3
 
$( "body" ).delegate( "a", "click", function( event ) {
  event.preventDefault();
});

还可以绑定自定义事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>delegate demo</title>
  <style>
  p {
    color: red;
  }
  span {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
 
<script>
$( "body" ).delegate( "p", "myCustomEvent", function( e, myName, myValue ) {
  $( this ).text( "Hi there!" );
  $( "span" )
    .stop()
    .css( "opacity", 1 )
    .text( "myName = " + myName )
    .fadeIn( 30 )
    .fadeOut( 1000 );
});
$( "button" ).click(function() {
  $( "p" ).trigger( "myCustomEvent" );
});
</script>
 
</body>
</html>

演示：