jQuery的常用事件整理

on,off, bind,unbind,

one,绑定一个一次性的事件

hover， 当鼠标移动到一个匹配的元素的上面时，触发第一个函数，当移出去时，触发第二个函数

blur, focus,当元素失去焦点时触发blur事件，当元素获取焦点时触发focus事件

click,当匹配的元素被点击时触发click 事件

keypress, keyup, keydown，当按键被按下，或者弹起，时触发keypress, keyup事件，这个完整的动作触发keydown事件

mouseenter, mouseleave，当鼠标移到一个区域触发mouseenter事件，移动出去该区域触发mouseleave 事件

select，当input或者textarea文本被选中的时触发select 事件

change， 当input的value 值改变时触发change事件，或者其他的元素的值改变时。

submit，当表单提交时触发submit 事件

resize，当调整浏览器的窗口的大小时，触发resize事件

scroll，当用户滚动指定的元素时，会触发scroll事件，例如滚动页面（操作的是window对象）

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="jquery-1.11.1.min.js"></script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>this is p</p>

<button>this is button</button>

<div class="clickme" style="background-color: red">Click here</div>

<input type="radio">性别
<br>

<input type="text" value="this is input">
<br>
<form id="myform" action="4.html" method="post">
    用户名：<input type="text" name="username" value="" id="username"><br>
    密码：<input type="text" name="password" value="" id="password"><br>
    <input type="submit" value="提交表单">
</form>

</body>
</html>
<script>
    $(function () {
        //on 在选择元素上绑定一个或多个事件的事件处理函数。
        // $("p").on("click", function(){
        //     alert( $(this).text() );
        //     //off 删除绑定的事件
        //     if($(this).text() === "this is p"){
        //         alert("移除p标签的click事件")
        //         $(this).off();
        //     }
        // });

        // $("p").on("click", {"foo":"bar"}, function (event) {
        //     alert(event.data.foo)
        // })

        //bind 为每个匹配元素的特定事件绑定事件处理函数。
        // $("p").bind("click", function(){
        //     alert( $(this).text() );
        //
        //     //unbind 解绑一个事件
        //     if($(this).text() === "this is p"){
        //         alert("click 已经解绑了")
        //         $("p").unbind();
        //     }
        // });

        //同时绑定多个事件类型/处理程序
        // $("button").bind({
        //     click:function () {
        //         $("p").slideToggle();
        //     },
        //     mouseover:function () {
        //         $(this).css("background-color","blue");
        //     },
        //     mouseout:function () {
        //         $(this).css("background-color","red");
        //     }
        // })

        //one 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
        // $("p").one("click", function(){
        //     alert( $(this).text() );
        // });


        //hover 当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数
        // $("p").hover(function () {
        //     $(this).css("color", "red");
        // }, function () {
        //     $(this).css("color", "blue")
        // })

        //blur 当元素失去焦点时触发 blur 事件。
        // $("input").blur(function () {
        //     alert($(this).val());
        // })

        //focus 当元素获得焦点时，触发 focus 事件。
        // $("input").focus(function () {
        //    $(this).val("hello focus");
        // });

        //click 当发生点击事件
        // $("p").click(function () {
        //     alert($(this).val());
        // })

        //keydown当键盘或按钮被按下时，发生 keydown 事件。
        // $("input").keydown(function (event) {
        //     if(event.keyCode === 13){//回车
        //         alert($(this).val());
        //     }
        // });

        //keypress 当键盘或按钮被按下时，发生 keypress 事件。
        // $("input").keypress(function (event) {
        //     alert($(this).val());
        // })

        //keyup 当按键弹上来的时候出发
        // $("input").keyup(function (event) {
        //     alert($(this).val());
        // });

        //mouseenter
        // $("div.clickme").mouseenter(function () {
        //     $(this).css("background-color","yellow");
        // })
        //
        // //mouseleave
        // $("div.clickme").mouseleave(function () {
        //     $(this).css("background-color", "pink");
        // })

        //resize  当窗口调整大小时触发事件
        // $(window).resize(function () {
        //     alert("resize");
        // })

        //select 当textarea或者为text的input的文本被选中时触发
        // $(":text").select(function () {
        //     alert($(this).val());
        // });


        //submit 当提交表单时，会发生 submit 事件。
        // $("form").submit(function () {
        //     alert($("#username").val());
        //     alert($("#password").val());
        //     return false;//阻止表单提交
        // })

        //scroll 页面滚动时触发
        // $(window).scroll(function () {
        //     alert("page scroll");
        // });

        //change 当元素的值发生改变时，会发生 change 事件。
        // $("input:text").change(function () {
        //     alert($(this).val());
        // });
    });
</script>