jQuery on（）方法使用技巧详解

jQuery on（）方法是官方推荐的绑定事件的一个方法。
复制代码代码如下:
$（selector）.on（event,childSelector,data,function,map）

由此扩展开来的几个以前常见的方法有.
复制代码代码如下:
bind（）
$（"p"）.bind（"click",function（）{
alert（"The paragraph was clicked."）;
}）;
$（"p"）.on（"click",function（）{
alert（"The paragraph was clicked."）;
}）;
delegate（）
$（"#div1"）.on（"click","p",function（）{
$（this）.css（"background-color","pink"）;
}）;
$（"#div2"）.delegate（"p","click",function（）{
$（this）.css（"background-color","pink"）;
}）;

live（）
$（"#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"）;
}）;
}）;