首页
话题
消息
手册
我的
返回介绍

.delegate()

发布于 2017-09-11 字数5430 浏览 1043 评论 0

所属分类:事件 > 绑定事件处理器

.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()方法。在一般情况下,这些是两种方法的等效的方法:

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

例如, 下面的 .delegate() 代码:

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

是等价于下面使用.on()的代码:

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

要移除使用delegate()绑定的事件,查看.undelegate()方法。

传递和处理事件数据的方式和.on()的方式一样的。

Additional Notes:(其他注意事项:)

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

例子:

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

<!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="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.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>

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:red; }
  span { color:blue; }
  </style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.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>

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!