JQuery发展历程：
简单事件绑定(click,mouseenter,mouseleave)===>bind事件绑定===>delegate事件绑定===>on事件绑定
1.简单事件绑定
$("p").click(function(){
//事件响应方法
});
缺点：不能绑定多个事件
2.bind事件绑定
$("p").bind("click,mouseenter",function(){
//事件响应方法
});
第一个参数：事件类型
第二个参数：事件处理函数
缺点：不支持动态事件绑定
3.delegate注册，委托事件
<div>
<span></span>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
$("div").delegate("p","click",function(){ //此时div中所有的 p 都会触发委托代理事件，但是span不会
console.log($(this)); //当前点击的 p 标签
});
第一个参数：selector，要绑定事件的元素
第二个参数：事件类型
第三个参数：事件处理函数
特点：给父元素注册委托事件，最终还是由子元素执行
原理：给div（父元素）注册委托代理事件，当点击 p 触发事件时，（p 本身是没有任何事件，是借用冒泡，点击p 触发父元素（div）的委托代理事件），
此时 div 会查看点击的的事件元素和参数1 是否一致，如果一致则同意把事件给p。
可理解为：快递员，储存柜和自己的 关系
缺点：只能注册委托事件，需要记得注册事件太多
4.on事件绑定
方式1：on注册简单事件
$(selector).on("click",function(){}); //给$(selector)绑定事件，由自己触发，不支持动态绑定
方式二：on注册委托事件
$(selector).on("click","span",function(){}); //给$(selector)绑定代理事件，但必须是它的内部子元素span 才能触发这个事件，支持动态绑定
on注册事件的语法：
第一个参数：events，绑定事件的名称，可以用空格分隔的多个事件
第二个参数：selector，执行事件的后代元素（可选），如果没有后代元素，事件则自己执行
第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);
案例：动态添加表格，删除表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } #dv { width: 250px; height: 400px; /* border: 1px solid #333; */ margin: 100px auto; } table { border-collapse: collapse; } td, th { width: 100px; border: 1px solid #333; line-height: 30px; text-align: center; } </style> </head> <body> <div id="dv"> <input type="button" value="清空内容" id="delAll"> <input type="button" value="添加" id="add"><br> </div> <script src="./js/jquery-1.12.4.js"></script> <script> $(function() { var arr = [{ name: "宾利", score: 100 }, { name: "刘华", score: 34 }, { name: "恒瑞", score: 77 }, { name: "利泰", score: 99 }, { name: "哈斯", score: 76 }, ]; var $tab = $("<table><thead><tr><th>姓名</th><th>成绩</th><th>操作</th></tr></thead></table>"); for (var i = 0; i < arr.length; i++) { var obj = arr[i]; // 创建行对象 var $tr = $("<tr><td>" + obj.name + "</td><td>" + obj.score + "</td><td><a href='#' class='del'>del</a></td></tr>"); // 把行追加到table中 $tr.appendTo($tab); } $tab.appendTo("#dv"); //把table显示在页面上 // 添加事件 $('#add').on("click", function() { $tr = $("<tr><td>厉害了</td><td>10000</td><td><a href='#' class='del'>del</a></td></tr>"); $tr.appendTo($tab); }); // 清空事件 $("#delAll").on("click", function() { $("tbody").remove(); }); // 单行删除事件（找到他们共同的父级元素===>tbody） $("tbody").on("click", ".del", function() { $(this).parents("tr").remove(); }); }); </script> </body> </html>
2、移除事件绑定事件
unbind 和 undelegate 现在不使用了，统一使用 off 方式（针对on绑定事件）
方式一：
1.不传参
$(selector).off(); //解绑 selector 的所有绑定事件
方式二：
2.传参
$(selector).off("click"); //解绑指定事件，譬如：click
3、触发事件
方式一：
$(selector).click(); // 直接输入选择器名字及触发的事件类型
方式二：
$(selector).triggle("click"); // 选择要触发的元素，调用triggle 方法
案例：触发事件
$("p").on("click",function(){
alert("p 的点击事件");
});
$("#btn").on("click",function(){
//方式一：
$("p").click();
//方式二：
$("p").triggle("click");
})；