jQuery：Dom元素绑定click等事件的四个方法。

1.常见的$(DOM元素).click(function(){});

DOM元素可以通过id、class、标签获取
通过标签名获取，获取button的DOM对象。

$("button").click(function(){
    $("body").append("<p>标签</p>")
  });

点击按钮，页面出现标签。

通过标签的id属性获取DOM对象

 $("#text").click(function(){
    $("body").append("<p>id</p>")
  });

点击按钮，页面会出现标签、id。因为同一个标签可以绑定多个点击触发事件，

调换触发顺序，页面显示的顺序也不一样。同时可以通过禁止后面的点击事件触发，从而不显示标签。

不过语法得变一下，因为这三个button不存在子父级关系。

通过class属性获取DOM对象。

$(".text").click(function(){
    $("body").append("<p>class</p>");
  });

2.通过bind()方法。(不推荐，已经被on()方法替代了)

语法为：$(selector).bind(event,data,function(){})，其中event可以绑定多个事件，使用空格隔开。缺点：不可以选择还未生成的DOM元素进行绑定事件，不可以选择子元素。

event：必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data：可选。规定传递到函数的额外数据。
function：必需。规定当事件发生时运行的函数。

<script type="text/javascript">
$(document).ready(function(){
  $("button").bind("click mouseenter",{ "name" : "xxx","age" : 18},function(event){
  	alert(event.data.name);
    alert(event.data.age);
    $("p").css("background-color","yellow");
  });
});
</script>

3.通过delegate()方法。相对bind()方法来说可以动态绑定元素。

语法：$(selector).delegate(childSelector,event,data,function)
childSelector：必需。规定要附加事件处理程序的一个或多个子元素。
event：必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data：可选。规定传递到函数的额外数据。
function：必需。规定当事件发生时运行的函数。

<script type="text/javascript">
$(document).ready(function(){
  $("div").delegate("button","click",function(){
  	$("div").append("<p>这是一个段落。</p>")
  });
  $("div").delegate("p","click",function(){
  	alert("动态绑定")
  });
});
</script>

4.通过on()方法。语法和delegate有点不同。（推荐）

语法：$(selector).on(event,childSelector,data,function)
event：必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
childSelector：必需。规定要附加事件处理程序的一个或多个子元素。
data：可选。规定传递到函数的额外数据。
function：必需。规定当事件发生时运行的函数。

<script>
$(document).ready(function(){
  $("div").on("click","button",{"name": "xxx","age": 18 },function(event){
  	$("div").append("<p>这是一个段落。</p>");
    $("div").append(event.data.name);
    $("div").append(event.data.age);
  });
  $("div").on("p","click",function(){
  	alert("动态绑定")
  });
});
</script>

这个是菜鸟教程的在线编辑器地址：https://www.runoob.com/try/try.php?filename=tryjs_events

大家可以自行尝试。

扩展：

当第一个点击事件触发后，禁止后面的点击事件。(标签必须有子父级关系)
语法：event.stopPropagation()
打开注释，就只弹出span。