jquery on()方法及其参数使用

1.定义

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

2.语法

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

3.参数

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

4.实例

1. 基本用法
$("#div1").on("click",function(){

$(this).css("background-color","pink");

});

2. 绑定div下所有p标签的click方法
$("#div1").on("click","p",function(){

$(this).css("background-color","pink");

});

3. 一个元素多个事件绑定同一个方法
$("p").on("mouseover mouseout",function(){

$("p").toggleClass("intro");

});

4. 一个元素绑定不同事件不同方法
$("p").on({

mouseover:function(){$("body").css("background-color","lightgray");},

mouseout:function(){$("body").css("background-color","lightblue");},

click:function(){$("body").css("background-color","yellow");}

});

5. 绑定自定义元素
$("p").on("myOwnEvent", function(event, showName){

$(this).text(showName + "! What a beautiful name!").show();

});

$("button").click(function(){

$("p").trigger("myOwnEvent",["Anja"]);

});

6. 传入数据
function handlerName(event) {

alert(event.data.msg);

}
$(document).ready(function(){

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

});

7. 向将要创建的元素绑定方法
$(document).ready(function(){

$("div").on("click","p",function(){

$(this).slideToggle();

});

$("button").click(function(){

$("<p>This is a new paragraph.</p>").insertAfter("button");

});

});

8. 移除事件
$(document).ready(function(){

$("p").on("click",function(){

$(this).css("background-color","pink");

});

$("button").click(function(){

$("p").off("click");

});

});