Jquery绑定事件的四种方式

bind（)

注意：bind()函数在jquery1.7版本以前比较受推崇，1.7版本出来之后，官方已经不推荐用bind()

：bind()函数只针对已经存在的元素进行事件的设置
介绍：bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数

使用：绑定单个事件模板： $(selector).bind(event,data,function)

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").bind("click",function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>请点击这里</button>
</body>
</html>

绑定多个事件写法：模板： $(selector).bind({event:function, event:function, ...})

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").bind({
    click:function(){$("p").slideToggle();},
    mouseover:function(){$("body").css("background-color","red");},  
    mouseout:function(){$("body").css("background-color","#FFFFFF");}  
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>请点击这里</button>
</body>
</html>

Unbind()

介绍：unbind() 方法移除被选元素的事件处理程序。

该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行

使用：去除p标签上所有事件模板：$(selector).unbind(event,function)

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").click(function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("p").unbind();
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>点击任何段落可以令其消失。包括本段落。</p>
<button>删除 p 元素的事件处理器</button>
</body>
</html>

 

去除绑定的某一特定事件方式

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
function alertMe()
{
alert("Hello World!");
}

$(document).ready(function(){
  $("p").click(alertMe);
  $("button").click(function(){
    $("p").unbind("click",alertMe);
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>点击任何段落可以触发一个提示框。包括本段落。</p>
<button>从 p 元素的 click 事件删除提示框函数</button>
</body>
</html>

live（） on（） delegate()使用方式基本与bind（）并且都支持未来新添加元素的事件设置

以live（）为例

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").live("click",function(){//此处的live（）改成bind（），新增的<p>标签就没有此事件，而live（）依然存在此事件
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>This is a new paragraph.</p>").insertAfter("button");
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>点击任意 p 元素会令其消失。包括本段落。</p>
<button>在本按钮后面插入新的 p 元素</button>
<p><b>注释：</b>通过使用 live() 方法而不是 bind() 方法，新的 p 元素同样会在点击时消失。</p>
</body>
</html>

现在更推荐使用on()，主讲on()

Reason：

bind()函数在jquery1.7版本以前比较受推崇，1.7版本出来之后，官方已经不推荐用bind()，替代函数为on(), 这也是1.7版本新添加的函数，同样，可以用来代替live()函数，live()函数在1.9版本已经删除； c、bind()、.live() 或.delegate()，查看源码就会发现，它们实际上调用的都是.on()方法

使用on()对类选择器进行单事件绑定

<body>
 2 <button id="add" type="button">add DIV</button>
 3 <button id="del" type="button">del DIV</button>
 4 <button id="onBtn" type="button">绑定事件</button>
 5 <button id="offBtn" type="button">解绑事件</button>
 6 <div id="container">
 7     <div class='created'>我是原生div<div/>
 8 </div>
 9 </body>
10 <script>
11     $(function () {
12         $("#add").click(function(){
13             $("#container").prepend("<div class='created'>我是动态生成的div<div/>")
14         });
15         $("#del").click(function(){
16             $("div").remove(".created:first")
17         });
18         $("#onBtn").click(function(){
19             $("#container").on("click",".created",function(){
20                 alert(1);
21             });
22         });
23         $("#offBtn").click(function(){
24             $("#container").off("click");
25         })
26     })
27 </script>

更多详细参考