jQuery on() 方法
-
定义和用法
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。自 jQuery 1.7 版本起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。注意:使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。提示:如需添加只运行一次的事件然后移除,请使用 one() 方法。 -
语法
$(selector).on(event,childSelector,data,function) -
参数
参数 描述 event 必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。childSelector 可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。 data 可选。规定传递到函数的额外数据。 function 可选。规定当事件发生时运行的函数。 -
示例
下例演示了on()方法多个事件处理程序附加到<p>元素。
尝试一下<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎来到蝴蝶教程</title> //此版本是百度cdn 1.11.1,当然你可以使用更高的版本,从2.0版本以上的是不支持ie6-8的 <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function () { $("p").on({ mouseenter: function(){ $(this).css("background-color", "lightgray"); }, mouseleave: function(){ $(this).css("background-color", "lightblue"); }, click: function(){ $(this).css("background-color", "yellow"); } }); }); </script> </head> <body> <p>点击我执行多个事件方法哦</p> </body> </html>
-