（一）事件添加

1、直接添加：$（"：button"）.click（function（）{　　}）

2、bind添加：$（“：button”）.bind（“click”，function（）{　　}）

3、delegate：$（“ul”）.delegate（“li”，“click”，function（）{　　}）

注意：添加单个事件：可以直接添加或者使用bind；delegate适用于多线程添加事件，

（二）基本事件

 1、error：当界面或者指定元素出现错误时，触发事件，通常由于日志记录、隐藏错误图片等，

　　resize：调整窗口大小时触发；

　　unload：离开界面时触发；

　　scroll：滚动窗口或者指定对象时触发，常与scrollTop搭配使用，

2、change：当text内容、select等选项内容发生变化时，触发指定事件；

　　select：当textarea或者文本类型的input标签中，文本内容被选择时触发；

3、click\dblclick：单击事件和双击事件，用的最多，

4、focus\blur：聚焦\取消聚焦，焦点在某个单独的元素，聚焦不冒泡，

　 focusing\focusout：聚焦\取消聚焦，作用于整个元素区域、包含子元素，聚焦冒泡，

　 注意：上面两组重点区别在于：焦点在某个子元素时，父类元素是否能够触发事件，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script src="jquery-1.12.4.min.js"></script>
    <style>
        body{
            margin:0;
            padding:0;
        }
        .r{
            color:red;
            font-size:20px;
        }
    </style>

</head>
<body>
    <div class="p1">
        <p class="r">blur\focus</p>
        <p>change</p>
        <p>click\dblclick</p>
        <p>error</p>
    </div>

    <div class="p2" style="background:pink">
        <p>focus\focusin\focusout</p>
        <p>keydown\keypress\keyup</p>
        <p>mousedown\mouseenter\mouseleave\mousemove\mouseout\mouseover\mouseup</p>
    </div>

    <select>
        <option>resize</option>
        <option selected="selected">scroll</option>
        <option>select</option>
        <option>submit</option>
        <option>unload</option>
    </select>
    <div class="fff" style="padding:20px;border:1px solid red">
        <hr>
        <input type="text" value="啥？"/>
        <p><span>focusin：聚焦冒泡；focus：聚焦不冒泡</span><hr><span>focusout：聚焦冒泡；blur：聚焦不冒泡</span></p>
    </div>
    <script>
        $(function(){
        //change
            $("select").change(function(){$(this).css("border","1px solid red")});
            $(":text").change(function(){$(".p1").children().eq(1).css({"color":"blue","font-size":"20px",})});
        //error
            $(window).error(function(){return true});  //隐藏错误
            $("img").error(function(){$(this).hide()})
        //click、dblclick
            $(".p1").children().eq(2).click(function(){$(this).css("color","blue")}).
            dblclick(function(){$(this).css("background","yellow")});
        //focus\blur
            //$(":input").focus(function(){$(this).blur()});      //文本框无法输入
        //focusin\focusout可以在父元素上检测子元素的聚焦情况
            $(".fff").focusin(function(){$(this).css("color","blue")})
            .focusout(function(){$(this).css("color","black")});
            //$(".fff").focus(function(){$(this).css("color","blue")})
            //.blur(function(){$(this).css("color","black")});

        });
    </script>
</body>
</html>
View Code

5、keydown \ keypress \ keyup：

 keypress：返回字符的ASCII码值、不含功能键， keydown：返回键盘按键的键码，含功能键， keyup：当按钮被松开时，触发事件，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script src="jquery-1.12.4.min.js"></script>
    <style>
        body{
            margin:0;
            padding:0;
        }
        .p2{
            margin-top:200px;
        }
    </style>

</head>
<body>
    <div class="p2" style="background:pink">
        <p>keydown\keypress\keyup</p>
        <p>系统由KeyDown返回键盘的代码, 然后由TranslateMessage函数翻译成成字符,
            由KeyPress返回字符值.由KeyDown返回键盘的代码,
            KeyPress返回值与keydown不同.且作用范围不含功能键，
        </p>
    </div>


    <script>
        $(function(){
            $(window).keydown(function(event){console.log("keydown:",event.keyCode)});
            $(window).keypress(function(event){console.log("keypress:",event.keyCode)});
            $(window).keyup(function(){$(".p2").css("background","yellow")});
            /*
            $(window).keydown(function(event){
                switch(event.keyCode){
                    case 65:
                        $(".p2").css("margin-left","20px");
                        break;
                    case 68:
                        $(".p2").css("margin-right","20px");
                        break;
                    default:
                        alert("");
                };
            });
            */
        });
    </script>
</body>
</html>
View Code

6、mouseenter\mouseleave：元素与外部穿越时触发，与子元素之间或子元素彼此之间穿越时不触发

　mouseover\mouseout：元素与外部、与子元素、子元素之间，穿越时都触发

mousedown\mousemove\mouseup：鼠标按下、移动、抬起，注意event传递的鼠标坐标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script src="jquery-1.12.4.min.js"></script>
    <style>
        body{
            margin:0;
            padding:30px;
        }
        div{
            width:300px;
            border:1px solid yellow;
            padding:20px;
        }
        p{
            width:500px;
            padding:20px;
            margin:0;
            border:1px solid pink;
        }
        .b{
            color:blue;
        }
    </style>

</head>
<body>
    <div>
        <span></span>
        <p>mouseenter\mouseleave:穿过被选元素时触发，元素与子元素或者子元素之间穿越时不触发，</p>
        <p>mouseover\mouseout:穿过被选元素、或者元素与子元素、子元素之间穿越时，都触发，</p>
        <p>mousedown\mouseup</p>
        <p>mousemove:传递event变量，其中event.clientX和event.clientY表示鼠标的坐标</p>
    </div>


    <script>
        $(function(){
        //相同
            //$("div").mouseenter(function(){$(this).addClass("b")}).mouseleave(function(){$(this).removeClass("b")});
            //$("div").mouseover(function(){$(this).addClass("b")}).mouseout(function(){$(this).removeClass("b")});
        //不同
            var i = 0;
            //$("div").mouseenter(function(){$(this).children("span").text(i++)});
            $("div").mouseover(function(){$(this).children("span").text(i++)}); 
        //else
            //$("div").mousedown(function(){$(this).addClass("b")}).mouseup(function(){$(this).removeClass("b")});
            //$("div").mousedown(function(){$(this).mousemove(function(event){console.log(event.clientX,event.clientY)})}).mouseup(function(){return false;})
        });
    </script>
</body>
</html>
View Code

7、submit：提交表单，仅适用于form标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script src="jquery-1.12.4.min.js"></script>
    <style>
        body{
            margin:0;
            height:1000px;
        }
        div{
            margin:50px;
            height:200px;
            border:1px solid pink;
            overflow:auto;
        }
        div p{
            height:100px;
        }

    </style>

</head>
<body>
    <div>
        <p>resize:改变页面窗口大小</p>
        <p>scroll:滚动窗口或者指定对象</p>
        <p>select:当textarea或者文本类型的input标签中，文本内容被选择时</p>
        <p>submit:提交表单，只适用于form标签</p>
        <p>unload：离开页面时</p>
    </div>
    <form>
        <input type="text" value="select" />
        <textarea>textarea</textarea>
    </form>


    <script>
    //resize
        //$(window).resize(function(){alert("stop it!!!")})
    //scroll
        $(window).scroll(function(){console.log($(this).scrollTop())})
        $("div").scroll(function(){console.log($(this).scrollTop())})
    //select
        $(":text").select(function(){alert("ooo")});
        $("textarea").select(function(){alert("vvvv")});
    //submit
        $("form").submit();     //提交
        $("form").submit(function(){return false;});     //阻止提交
    //unload
        //$(window).unload(function(){alert("bye bye bye!!!");});
    </script>
</body>
</html>
View Code