# .delegate()

所属分类：事件 > 绑定事件处理器 | 弃用 > 3.0 版本弃用的 API 英文文档：.delegate()

## .delegate( selector, eventType, handler(eventObject) )返回: jQuery

描述: 为所有匹配选择器（selector参数）的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素。

- #### 添加的版本: 1.4.2.delegate( selector, eventType, handler(eventObject) )

  - selector
    类型: String
    选择器字符串，用于过滤器触发事件的元素。
  - eventType
    类型: String
    一个包含一个或多个用空格隔开的JavaScript事件类型的字符串，比如"click"或"keydown,"或自定义事件的名称。
  - handler(eventObject)
    类型: Function()
    每当事件触发时执行的函数。

- #### 添加的版本: 1.4.2.delegate( selector, eventType, eventData, handler(eventObject) )

  - selector
    类型: String
    选择器字符串，用于过滤器触发事件的元素。
  - eventType
    类型: String
    一个包含一个或多个用空格隔开的JavaScript事件类型的字符串，比如"click"或"keydown,"或自定义事件的名称。
  - eventData
    类型: Object
    一个对象，它包含的数据键值对映射将被传递给事件处理程序。
  - handler(eventObject)
    类型: Function()
    每当事件触发时执行的函数。

- #### 添加的版本: 1.4.3.delegate( selector, events )

  - selector
    类型: String
    选择器字符串，用于过滤器触发事件的元素。
  - events
    类型: PlainObject
    一个对象，包含一个或多个DOM事件类型和函数并执行它们。

从jQuery 1.7开始，`.delegate()`已经被.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()`的方式一样的。

### Additional Notes:（其他注意事项：）

- 自从`.live()`方法处理事件一旦传播到文档的顶部，live事件是不可能停止传播的。同样地，`.delegate()` 事件将始终传播给其中包含的被委托元素；同时，任何在 DOM 树中，比这些元素低的元素上绑定的相同事件，在 .delegate() 事件被调用的时候，也会被触发。因此，如果要在事件中阻止委托事件被触发，可以调用`event.stopPropagation()`或者返回`false`防止委派处理程序冒泡。

## 例子:

#### Example: 点击添加另一个段落。请注意， .delegate() 绑定所有段落的click事件 - 甚至是新的段落。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
    <!DOCTYPE html><html><head>  <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-latest.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>

#### Demo:

#### Example: 每当段落的文字被点击时候，要显示一个警告框：

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

#### Example: 返回false，取消默认的行为，防止从它冒出来的，：

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

#### Example: 要取消默认动作只有通过使用preventDefault方法。

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

#### Example: 也可以绑定自定义事件。

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 |
    <!DOCTYPE html><html><head>  <style>  p { color:red; }  span { color:blue; }  </style>  <script src="https://code.jquery.com/jquery-latest.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>

#### Demo: