开发者学堂课程【jQuery 开发教程：jQuery_ 绑定事件处理器下】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4288
jQuery_ 绑定事件处理器下
一、事件
1、 .delegate()：
事件委托，三个参数分别为选择器、事件类型、处理函数。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> // 引入 jQuery <script src="jquery-2.2.1.min.js"></script> </head> <body> // 事件委托最常用的是 ul和 li 标签的组合。 <ul> <li>li 1</li> <li>li 2</li> <li>li 3</li> <li>li 4</li> </ul> <script> // 文档委托 $(function(){ // 事件委托选择 ul 。第一个为选择器 li ，第二个是点击事件，第三个为 function 函数。 $("ul").delegate("li","click",function(){ // 弹出当前对象的内容 alert($(this).html()); }) }) </script> </body> </html>
效果截图：
2、 .on()：
添加，可以代替 .bind() 和 .delegate() 。在选定的元素上绑定一个或多个处理函数。
（1）利用 .on() 事件写 button
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> // 引入 jQuery <script src="jquery-2.2.1.min.js"></script> </head> <body> <button id="btn">button</button> <script> $(function(){ // 给 click 事件，只绑定一个事件 $("#btn").on("click",function(){ alert(haha); }) }) </script> </body> </html>
效果截图：
（2）利用 .on() 事件实现事件委托
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> // 引入 jQuery <script src="jquery-2.2.1.min.js"></script> </head> <body> <button id="btn">button</button> <ul> <li>li 1</li> <li>li 2</li> <li>li 3</li> <li>li 4</li> </ul> <script> $(function(){ // 给 click 事件，第二个绑定 li 元素 $("ul").on("click","li",function(){ alert($(this).html()); }) }) </script> </body> </html>
效果截图：
（3）给一个元素添加多个事件效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-2.2.1.min.js"></script> <style> p{ width: 100px; background-color: red; } </style> </head> <body> <button id="btn">button</button> <ul> <li>li 1</li> <li>li 2</li> <li>li 3</li> <li>li 4</li> </ul> <p>haha</p> <script> $(function(){ // 给一个元素添加多个效果 $("p").on("mouseover mouseout",function(){ alert(haha); }) }) </script> </body> </html>
效果截图：
3.off()：移除
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-2.2.1.min.js"></script> <style> p{ width: 100px; background-color: red; } </style> </head> <body> <button id="btn">button</button> <ul> <li>li 1</li> <li>li 2</li> <li>li 3</li> <li>li 4</li> </ul> <div> <p>haha</p> </div> <script> $(function(){ // 添加函数 var fn=function(){ alert("haha"); }; $("div").on("click mouseover","p",fn); // 将 mouseover 移除，如果什么都不添加，将会移除所有事件。 $("div").off("mouseover","p",fn); }) </script> </body> </html>
效果截图：
4、 .one()：
对元素的事件添加处理函数，处理函数在每个元素上，每种事件类型最多执行一次。常用作引导页，因为引导页只执行一次。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-2.2.1.min.js"></script> <style> p{ width: 100px; background-color: red; } </style> </head> <body> <p>haha</p> <ul> <li>li 1</li> <li>li 2</li> <li>li 3</li> <li>li 4</li> </ul> <p>haha</p> <script> $(function(){ $("p").one("click",function(){ alert("haha"); }) }) </script> </body> </html>
效果截图：
点击一次将会触发，再次点击将不会触发。
5、.unbind()：是 .bind()的移除事件。
6、 .undelegate()：是 .delegate()的移除事件。
