DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery入門技巧 >> jquery中關於bind()方法的使用技巧分享
jquery中關於bind()方法的使用技巧分享
編輯:JQuery入門技巧     

.bind()方法可使用.on()方法來代替

on()方法提高代碼易讀性,如下

$("input").bind("click", { foo: "hello" }, handler);

$("input").on("click", { foo: "hello" }, handler);

bind()綁定事件的時候,這些元素必須已經存在,而on()可以處理類似於代理這樣的東東,也就是說不存在的元素(動態生成的元素也可以處理),如下動態生成的 To do list ,再雙擊刪除,可使用on()輕松完成,你會發現,on換成bind是不行的。

<input type="text" id="str">
<button id="btn">添加</button>
<h3>To do list</h3>
<ul></ul>
$(document).ready(function(){
 $('#btn').on('click',function(){
  var str = $('#str').val();
  $('<li>').text(str).appendTo('ul'); 
  $('#str').val('');
 })

 //To do list雙擊刪除
 $(document).on('dblclick','li',function(){
  $(this).remove();
 })
});

on()事件綁定的妙用:我們經常要在網頁裡面處理大量的表格,假設表格有1000行,如果為每個tr都綁定一個click事件是非常占用內存的,而更加優雅的方法是:使用父元素tbody作事件代理,只需綁定一次,子孫元素tr上發生的事件會冒泡到tbody進行處理,節省開銷

//效率低下的寫法
$( "#dataTable tbody tr" ).on( "click", function() { \……

//換成優雅高效滴
$( "#dataTable tbody" ).on( "click", "tr", function() { \……

總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對的支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved