代码改变世界

js 事件的递归调用

2012-06-07 13:16  yangpan  阅读(759)  评论(0)    收藏  举报

递归绑定法(recursive binding)。jQuery里的.bind()方法，其实是一种对事件处理的通用写法。

例如点击事件：.click(), 可以写成.bind(‘click’)。而.unbind()，顾名思义就是解除事件处理。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>jQueryPad Preview</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
		
		<style type="text/css">
		
		body
		{
		    font-family: Segoe UI;
		    font-size: 10pt;
		    background: white;
		}
		
		</style>
		
		<script type="text/javascript">

function addItem() {
  $('#list1 li button')
  .unbind('click')//解除click事件
  .bind('click', function(){
  var $newLi = $('<li><button>新按钮</button></li>');
  $(this).parent().after($newLi);
  addItem();//使用递归函数重新赋值
  });
}
$(document).ready(function() {
  addItem();
  // 以下是原始事件绑定
  $('#list1 li button').click(function() {
  $(this).after('原始绑定');
  });
});

        </script>
		
    </head>
	<body>

 <div>
   <ul id="list1">
     <li>非按钮 </li>
     <li><button>点击我</button> </li>
   </ul>
 </div>

    </body>
</html>

通过上面的演示，你可能发现一个问题：点击最初的按钮，你没有看到“原始绑定”这几个字别加在按钮后面。

虽然在代码里，我定义了原始事件捆绑，但是在递归函数addItem()里，这原始事件被解除(unbind)了。

如何让unbind函数只解除新的事件而保留原始事件呢。其中一种办法是，使用“命名空间”（namespacing）

 

function addItemNS() {

  $('#list2 li button')

  .unbind('click.addit')//这里加上了addit，建立命名空间

  .bind('click.addit', function() {

    var $newLi = $('<li  > <button>新按钮</button></li>');

    $(this).parent().after($newLi);

    addItemNS();

  });

}

$(document).ready(function() {

  addItemNS();

  //原始事件捆绑

  $('#list2 li button').click(function() {

  $(this).after('原始捆绑');

  });

});