JS 基础事件的用法

        // 1.9以上用on
        // 案例一
        // $('#btn').on('click', function(){
        //     //console.log(1);
        //     alert('测试...');
        // });

        // 案例二
        // $('#btn').on('click mouseover', function(){
        //     //console.log(1);
        //     alert('测试...');
        // });

        // 案例三
        // $('#btn').on('mouseover mouseout', function(){

        //     $('#div1').html(function(index, value){

        //         return value+'1';
        //     });

        // });
        // 案例四
        // $('#btn').on({
        //     // 键值用引号也可以
        //     mouseover: function(){
        //         alert('移入...');
        //     },
        //     mouseout: function(){
        //         alert('移出...');
        //     }
        // });

        // on()与 off()的用法
        // $('#btn').on('click mouseover', function(){
        //     alert('鼠标移入...');
        // });

        // $('#btn').off('mouseover');

        //
        // $('#btn').on('click', fn1);
        // $('#btn').on('click', fn2);

        // $('#btn').off('click', fn2);
        // function fn1(){
        //     alert('fn1');
        // }

        // function fn2(){
        //     alert('fn2');
        // }

        // $('form').submit(function(){
        //     alert('表单提交了');
        // });

        // focus(),  blur()
        // $('#txt').focus(function(){
        //     alert('光标激活状态...');
        // }).blur(function(){
        //     alert('光标丢失状态...');
        // });

        // $('#txt').mousedown(function(){
        //     alert('按下');
        // })

        $('#btn').mouseup(function(){
            alert('抬起');
        })

        // mousedown 鼠标按下
        // mouseup 鼠标按下弹起
        // mousemove 鼠标拖拽
        // resize 改变浏览器窗口大小时触发
        // scroll 滚动条改变时触发
        // submit 表达提交时触发
        // mouseover/out 会触发子节点
        // mouseenter/leave 不会触发子节点