重点事件注册.on()
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hue {
background-color: #0ff;
}
</style>
</head>
<body>
<input type="button" value="增加" id="btn">
<input type="button" value="自定义" id="btn1">
<input type="button" value="移除" id="btn2">
<div>
<p>我是一个P</p>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
/* on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
$(selector).on(event,childSelector,data,function)
event 必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。
childSelector 可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data 可选。规定传递到函数的额外数据。
function 可选。规定当事件发生时运行的函数。
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。
注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
提示：如需移除事件处理程序，请使用 off() 方法。
提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。 */
$(function () {
//给btn注册点击事件
$("#btn").on("click", function () {
$("<p>我是新建的p元素</p>").appendTo("div");
});
//注册多个事件
$("p").on("mouseover mouseout", function () {
$("p").toggleClass("hue");
});
//给div注册委托事件
$("div").on("mouseover mouseout", "p", function () {
$("p").toggleClass("hue");
});
//多个事件 各自处理函数
$("p").on({
mouseover: function () {
$("p").css("background-color", "lightgray");
},
mouseout: function () {
$("p").css("background-color", "lightblue");
},
click: function () {
$("p").css("background-color", "yellow");
}
});
//自定义事件
$("p").on("myOwnEvent", function (event, showName) {
$(this).text(showName + "单击此按钮可将自定义事件附加到此p元素上。").show();
});
$("#btn1").click(function () {
$("p").trigger("myOwnEvent", ["小白+"]);
});
//off（）移除on方法添加的事件
$("#btn2").click(function () {
$("p").off("click");
});
});
</script>
</body>
</html>
1.bind()方法
//bind方式
//bind() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。
//自 jQuery 版本 1.7 起，on() 方法是向被选元素添加事件处理程序的首选方法。
//语法：$(selector).bind(event,data,function,map)
//event 必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
//data 可选。规定传递到函数的额外数据。
//function 必需。规定当事件发生时运行的函数。
$("p").bind("mouseover mouseout", function () {
$("p").toggleClass("intro");
});
2.delegate()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
//delegate:代理，委托(给父元素注册委托事件，最终还是有子元素来执行。)
//$('div').delegate(childSelector,event,data,function)
//delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
//使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
//(自 jQuery 版本 1.7 起，on() 方法是向被选元素添加事件处理程序的首选方法。)
//childSelector 必需。规定要添加事件处理程序的一个或多个子元素。(真正执行事件的子元素)
//event 必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
//data 可选。规定传递到函数的额外数据。
//function 必需。规定当事件发生时运行的函数。
$(document).ready(function () {
$("div").delegate("p", "click", function () {
$(this).slideToggle();
});
$("button").click(function () {
$("<p>这是一个新段落。</p>").insertAfter("button");
});
});
</script>
</head>
<body>
<p><b>注意:</b> 只有在 div 元素中的 p 元素才有效果。</p>
<div style="background-color:yellow">
<p>这是一个段落。</p>
<p>点击任意一个 p 元素，使其消失，包括这个。</p>
<button>在这个按钮后新增一个 p 元素</button>
</div>
</body>
</html>