jQuery on()方法

绑定click事件，使用jquery的$().click(func)？别闹了，属实是low。

虽然以前在ajax回调成功后经过dom添加过元素，遇到过这种状况，事件绑定会失效。今天又遇到了，在此总结下。

jQuery on()方法是官方推荐的绑定事件的一个方法。

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

$().click()和$(document).on('click','要选择的元素',function(){})的

最大的区别即优势是若是动态建立的元素在该选择器选中范围内是能触发回调函数。

$().on()的知识点补充：
　　1.从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的全部功能，用于统一取代之前的bind()、 delegate()、 live()等事件函数。
　　　　$().bind()直接绑定在元素上，和click，blur，mouseon同样的点击事件。
　　　　$().live()是经过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。
　　　　$().delegate()是更精确的小范围的使用事件代理。
　　　$().on()结合了这三个方法的优点摒弃了劣势。

　　2.该函数能够为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的前后顺序依次执行绑定的事件处理函数。
　　3. 阻止事件冒泡和事件委托的方法：
　　　　A：return false。 
　　　　　　在事件的处理中，能够阻止默认事件和冒泡事件。

　　　　B：event.preventDefault()
　　　　　　在事件的处理中，能够阻止默认事件可是容许冒泡事件的发生。

　　　　C：event.stopPropagation().。
　　　　　　在事件的处理中，能够阻止冒泡可是容许默认事件的发生。

 

由jQuery on()扩展开来的几个之前常见的方法有.

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"); }); });

项目经理是这么说的，还在用.click，你这样面试是会被刷下去的。。。