重点事件注册.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>