<!--绑定事件-->

    <div class="a1">

        <button class="bt">按钮</button>

    </div>

    <!--绑定事件结束-->

    <!--事件委托-->

    <div>

        <ul class="u1">

            <li class="l1">1111</li>

            <li>2222</li>

            <li>3333</li>

            <li>4444</li>

        </ul>

        <button class="bt2">+</button>

        <div class="d1"></div>

    </div>

    <!--事件委托结束-->

    // 绑定事件

        $('.bt').bind('click',function f() {

             alert("OK")

        });

        // 解除绑定

        $('.a1').unbind('click');

        //简写方式

            $('.bt').click(function f() {

                alert("OK")

            });

    //事件委托

        // $('父标签代理').on(事件,函数)

        //示例:

        //为每一个li添加一个弹出框

        $('ul').on('click',function () {

            alert("OK!!!");

        });

        //新添加一个li标签

          $('.bt2').click(function f() {

              var $a1 = $("<li>").html("5555");

              $(this).parent().children("ul").append($a1)

          })

        // //data 参数:

        //  function ff2(event) {

        //      alert(event.data.foo);

        //      $('ul').on('click',{foo:'bar'},ff2)

        //  }

     // //事件加载  ready === aload

    // //.ready 页面加载完成后再运行代码

    // $(document).read(function () {

    //     alert("OK")

    // });

    //

    // $(function f3() {

    //     alert('ok')

    // })