jQuery中 delegate使用的问题

习惯了bind,用惯了live,就不习惯delegate了呀有木有…

on(events,[selector],[data],fn)

支持为动态生成的标签元素绑定事件也许就live和delegate了吧,不过新版本已经不支持live了,只有delegate

  • events:一个或多个用空格分隔的事件类型和可选的命名空间,如”click”或”keydown.myPlugin”
  • selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代.
  • data:当一个事件被触发时要传递event.data给事件处理函数。
  • fn:该事件被触发时执行的函数。 false
    值也可以做一个函数的简写,返回false。
  • bind(type,[data],fn)
  • 为每个匹配元素的特定事件绑定事件处理函数。
  • jQuery 3.0中已弃用此方法,请用 on()代替。
  • 参数类型跟前面那个on一样.

delegate真的比较特殊呀,不同于其他事件绑定的风格。

bind与on的区别就在于–事件冒泡

就因为习惯了之前的bind风格..栽了跟头

demo1:

简单的说就是大意了。

##
点击相应的li弹出里面内容,这里把on换成bind是一样的没有区别.也就是说on不使用selector属性与bind并无区别   

delegate()
方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>
<script>
 $(function () {
  $('ul li').on('click',function(){
   alert($(this).text())
  }); 
 })
</script>

使用 delegate()
方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

demo2:

语法

<script>
 // 这种情况你会发现点击第四个不具备事件.也就是不具备动态绑定事件能力
 $(function () {
  $('ul li').bind('click',function(){
   alert($(this).text())
  }); 
  var ok = $('<li>4</li>');
  $('ul').last().append(ok);

 })
</script>
$(selector).delegate(childSelector,event,data,function)

demo3

参数 描述
childSelector 必需。规定要附加事件处理程序的一个或多个子元素。
event

必需。规定附加到元素的一个或多个事件。

由空格分隔多个事件值。必须是有效的事件。

data 可选。规定传递到函数的额外数据。
function 必需。规定当事件发生时运行的函数。
<script>
 // 换成on的写法,添加selector属性,就是通过事件冒泡,进行了事件委托,把li的事件委托给其父元素,点击后面加入的li就默认绑定了事件
 $(function () {
  $('ul').on('click','li',function(){
   alert($(this).text())
  }); 
  var ok = $('<li>4</li>');
  $('ul').last().append(ok);
 })
</script>

比如这段小代码啊

事件委托的好处

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("div").delegate("button","click",function(){
  $("p").slideToggle();
 });
});
</script>
</head>
<body>
<div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>

</body>
</html>
  • 万一子元素非常多,给每个子元素都添加一个事件,会影响到性能;
  • 为动态添加的元素也能绑上指定事件;

我老写成了

以上所述是小编给大家介绍的jQuery中的on与bind绑定事件区别实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

$(document).ready(function(){
 $("div").delegate($("button"),"click",function(){
  $("p").slideToggle();
 });
});

您可能感兴趣的文章:

  • JQuery中绑定事件(bind())和移除事件(unbind())
  • jQuery中的bind绑定事件与文本框改变事件的临时解决方法
  • jQuery中对未来的元素绑定事件用bind、live or
    on
  • jQuery事件绑定on()、bind()与delegate()
    方法详解
  • 解析jQuery的三种bind/One/Live事件绑定使用方法
  • jquery
    bind(click)传参让列表中每行绑定一个事件
  • jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
  • JQuery入门——移除绑定事件unbind方法概述及应用
  • JQuery入门——用bind方法绑定事件处理函数应用介绍
  • jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
  • jQuery中绑定事件bind() on() live()
    one()的异同
  • jQuery使用bind函数实现绑定多个事件的方法

子选择器不需要选择起来了..

不然就像我那样出现不知名的错误(点击会触发click,但点击其他元素也会触发click…)

以上所述就是本文的全部内容了,希望大家能够喜欢。

您可能感兴趣的文章:

  • jQuery中的.bind()、.live()和.delegate()之间区别分析
  • jQuery事件
    delegate()使用方法介绍
  • 由点击页面其它地方隐藏div所想到的jQuery的delegate
  • jQuery中delegate与on的用法与区别示例介绍
  • jQuery中bind,live,delegate与one方法的用法及区别解析
  • jQuery中delegate和on的用法与区别详细解析
  • 浅谈jquery中delegate()与live()

相关文章