jQuery on()方法

  • A+
所属分类:jQuery

定义和用法

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。

注意:使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。

提示:如需移除事件处理程序,请使用 off() 方法。

提示:如需添加只运行一次的事件然后移除,请使用 one() 方法。


语法

$(selector).on(event,childSelector,data,function,map)

  • event参数:必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
  • childSelector参数:可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。
  • data参数:可选。规定传递到函数的额外数据。
  • function参数:可选。规定当事件发生时运行的函数。
  • map参数:规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。

由此扩展开来的几个以前常见的方法有:

bind()
$("p").bind("click", function() {
    alert("The paragraph was clicked.");
});

$("p").on("click", function() {
    alert("The paragraph was clicked.");
});
delegate()
$(document).ready(function() {
    $("#div1").on("click", "p", function() {
        $(this).css("background-color", "pink");
    });
    $("#div2").delegate("p", "click", function() {
        $(this).css("background-color", "pink");
    });
});
live()
$(document).ready(function() {
    $("#div1").on("click", function() {
        $(this).css("background-color", "pink");
    });
    $("#div2").live("click", function() {
        $(this).css("background-color", "pink");
    });
});

以上三种方法在jQuery1.8之后都不推荐使用,官方在1.9时已经取消使用live()方法了,所以建议都使用on()方法

tip:如果你需要移除on()所绑定的方法,可以使用off()方法处理。

$(document).ready(function() {
    $("p").on("click", function() {
        $(this).css("background-color", "pink");
    });
    $("button").click(function() {
        $("p").off("click");
    });
});

tip:如果你的事件只需要一次的操作,可以使用one()这个方法

$(document).ready(function() {
    $("p").one("click", function() {
        $(this).animate({
            fontSize: "+=6px"
        });
    });
});

trigger()绑定

$(selector).trigger(event,eventObj,param1,param2,...)
$(document).ready(function() {
    $("input").select(function() {
        $("input").after(" Text marked!");
    });
    $("button").click(function() {
        $("input").trigger("select");
    });
});

多个事件绑定同一个函数

$(document).ready(function() {
    $("p").on("mouseover mouseout", function() {
        $("p").toggleClass("intro");
    });
});

多个事件绑定不同函数

$(document).ready(function() {
    $("p").on({
        mouseover: function() {
            $("body").css("background-color", "lightgray");
        },
        mouseout: function() {
            $("body").css("background-color", "lightblue");
        },
        click: function() {
            $("body").css("background-color", "yellow");
        }
    });
});

绑定自定义事件

$(document).ready(function() {
    $("p").on("myOwnEvent", function(event, showName) {
        $(this).text(showName + "! What a beautiful name!").show();
    });
    $("button").click(function() {
        $("p").trigger("myOwnEvent", ["Anja"]);
    });
});

传递数据到函数

function handlerName(event) {
    alert(event.data.msg);
}

$(document).ready(function() {
    $("p").on("click", {
        msg: "You just clicked me!"
    }, handlerName)
});

适用于未创建的元素

$(document).ready(function() {
    $("div").on("click", "p", function() {
        $(this).slideToggle();
    });
    $("button").click(function() {
        $("<p>This is a new paragraph.</p>").insertAfter("button");
    });
});

参考:

http://www.w3schools.com/jquery/event_on.asp

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: