jQuery 之用on()代替bind()

自jQuery1.7以后，建议用on()代替bind(),执行为备选元素添加一个或多个处理程序，并规定当函数运行时发生。

1 语法

on()和bind()的语法分别如下：

// on的语法
$(selector).on(event ,data, function)
// bind的语法
$(selector).bind(event,data,function)

参数	描述
*event	必需。规定要从被选元素添加的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。
*childSelector*	可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
*data*	可选。规定传递到函数的额外数据。
*function*	可选。规定当事件发生时运行的函数。

从这里可以看出，on()与bind()的区别在于，on()能够添加到指定的子元素处理程序。看来，on()的内心有着它的继承者，而bind()的内心只有自己。

下面，一个例子，点击button，切换p的显示和隐藏（由于例子简单，就不显示页面效果了）。HTML代码如下：

1 <body>
2     <div style="background-color:red">
3         <p>这是一个段落。</p>
4         <button>请点击这里</button>
5     </div>
6 </body>

使用bind()方法jQuery代替如下：

1 $(document).ready(function(){
2   $("button").bind("click",function(){
3     $("p").slideToggle();
4   });
5 });

使用on()方法代替bind()代码如下：

1 $(document).ready(function () {
2     $("button").on("click", function () {
3         $("p").slideToggle();
4     });
5 });

我们注意到，on可以添加指定子元素的处理程序。因此，jQuery代码也可以如下表示：

$(document).ready(function () {
    $("body").on("click", "button", function () {
        $("p").slideToggle();
    });
});

完结，✿✿ヽ(°▽°)ノ✿。

posted @ 2021-06-13 23:13 陆陆无为而治者阅读(222) 评论(0) 编辑收藏举报

刷新页面返回顶部