jQuery绑定事件

1.事件绑定的方式

事件
	DOM:三种绑定方式
	jQuery:
		#前面几种内部调用的全是on
		$('.c1').click()
　　　　　　　　　 $('.c1').blur()
　　　　　　　　　$('.c1').aaaaa()


		$('.c1').bind('click',function(){})
		$('.c1').unbind('click',function(){})


		$('.c1').delegate('a','click',function(){}) #不同于其它，有委托的作用。  .c1 下面所有的a 标签都绑定click事件。
		$('.c1').undelegate('a','click',function(){})
		
　　　　　　　　　　$('.c1').on('click',function(){})
		$('.c1').off('click',function(){})

2. 由于程序是从上往下执行，所以对新输入的值没有绑定alert事件。

delegate 从上往下执行的时候，还没有绑定事件。直到真正点击它的时候，才绑定并且执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input />
    <input />
    <ul >
        <li>123</li>
        <li>456</li>
    </ul>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#a1').click(function(){
            var v=$('#t1').val();
            var temp="<li>"+v+"</li>";
            $('#ul').append(temp);
        });

        $('ul li').click(function(){
            v=$(this).text();
            alert(v);
        })
    </script>
</body>
</html>

所以需要重新绑定

3. delegate具有委托的作用，不同于其它几个。

click不行，bind不行，on不行，delegate可以。委托。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input />
    <input />
    <ul >
        <li>123</li>
        <li>456</li>
    </ul>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#a1').click(function(){
            var v=$('#t1').val();
            var temp="<li>"+v+"</li>";
            $('#ul').append(temp);
        });

        $('ul').delegate('li','click',function(){
            v=$(this).text();
            alert(v);
        })
    </script>
</body>
</html>