jq：事件（注册事件、鼠标、键盘事件）

一、事件的注册

1、一次注册多个事件

（1）普通的注册方式

<body>
        <div></div>
        <script>
            $(function(){
                $("div").click(function(){
                    $(this).css("background-color","red");
                });
                $("div").mouseover(function(){
                    $(this).css("background-color","black");
                })
                
            })
        </script>
    </body>

需要单个单个地注册jq的事件

事件处理on：

<body>
        <div></div>
        <script>
            $(function(){
                $("div").on({
                    click:function(){
                        $(this).css("background-color","red");
                    },
                    mouseenter:function(){
                        $(this).css("background-color","black");
                    },
                });
                
            })
        </script>
    </body>

和上面的效果是一样的，但是一次可以注册多个事件

（2）on的事件委派

<body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <script>
            $(function(){
                $("ul").on("click","li",function(){
                    alert("你好");
                })
            })
        </script>
    </body>

click事件是绑定在ul上的，但是触发事件的是ul内的子元素li

2、事件解绑

（1）解绑普通事件

<body>
        <div></div>
        <script>
            $(function(){
                $("div").on({
                    click:function(){
                        $(this).css("background-color","red");
                    },
                    mouseenter:function(){
                        $(this).css("background-color","black");
                    },
                });
                $("div").off("click");
            })
        </script>
    </body>

在函数里不写参数的时候默认为解除所有事件

（2）解绑带有事件委派的事件

<body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <script>
            $(function(){
                $("ul").on("click","li",function(){
                    alert("你好");
                })
            });
            $("ul").off("click","li");
        </script>
    </body>

3、只触发一次one

<body>
        <div></div>
        <script>
            $(function(){
                $("div").one({
                    click:function(){
                        $(this).css("background-color","red");
                    },
                    mouseenter:function(){
                        $(this).css("background-color","black");
                    },
                });
                
            })
        </script>
    </body>

4、自动触发事件

方式一：

<body>
        <div></div>
        <script>
            $(function(){
                $("div").on({
                    click:function(){
                       alert("你好");
                    }
                });
                $("div").click();             
            })
        </script>
    </body>

方式二：

<body>
        <div></div>
        <script>
            $(function(){
                $("div").on({
                    click:function(){
                       alert("你好");
                    }
                });
                $("div").trigger("click");             
            })
        </script>
    </body>

方式三：

<body>
        <div></div>
        <script>
            $(function(){
                $("div").on({
                    click:function(){
                       alert("你好");
                    }
                });
                $("div").triggerHandler("click");             
            })
        </script>
    </body>

不会触发元素的默认行为，例如：input无光标

5、jq的事件对象

    <body>
        <div></div>
        <script>
            $(function(){
              $("div").on("click",function(event){
                  console.log(event);
              })
            })
        </script>
    </body>

二、鼠标、键盘事件

1、鼠标事件

(1)鼠标单击：click

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>鼠标单击事件</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                $("#button").click(function(){
                alert("按键被单击了！");
                });
            });
        </script>
    </head>
    <body>
        <button id="button">请点击！</button>
    </body>
</html>

（2）鼠标双击事件：dblclick

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>鼠标单击事件</title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
            $(function(){
                $("button").dblclick(function(){
                alert("鼠标双击了！！");
                });
            });
        </script>
    </head>
    <body>
       <button>请双击，以触发事件！</button>
    </body>
</html>

（3）mouseenter鼠标移动到相应元素上的时候触发，mouseleave鼠标不在相应的元素上的时候触发：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>鼠标单击事件</title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
            $(function(){
                $("p").mouseenter(function(){
                alert("鼠标移动到了段落上！");
                });
                
                $("p").mouseleave(function(){
                alert("鼠标从段落上移开了！");
                });
            });
        </script>
    </head>
    <body>
       <p>Just go. Just go. I just keep going until it feels right to me.</p>
    </body>
</html>

(4)hover()：鼠标悬停在元素上的时候触发

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>鼠标悬停事件</title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
          $(function(){
            $("p").hover(function(){
            $("p").css("background-color","red");
            },function(){
            $("p").css("background-color","yellow");
          });
        });
        </script>
    </head>
    <body>
     <p>Just go. Just go. I just keep going until it feels right to me.</p>
    </body>
</html>

2、键盘事件

(1)keypress()：按键被按下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>鼠标悬停事件</title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
          $(function(){
               $("input").keypress(function(){
            alert("有按键按下了！");
          });
        });
        </script>
    </head>
    <body>
       <input type="text">
    </body>
</html>

（2）keyup()：按键抬起触发

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>按键事件</title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
          $(function(){
               $("input").keyup(function(){
            alert("按键抬起了！");
          });
        });
        </script>
    </head>
    <body>
       <input type="text">
    </body>
</html>

按下按键没有警告框，只有按键抬起的时候对话框才会出现。

（3）keydown()：按键按下有效

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>按键事件</title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
        <script>
          $(function(){
               $("input").keydown(function(){
            alert("按键按下了！");
          });
        });
        </script>
    </head>
    <body>
       <input type="text">
    </body>
</html>

与keypress不同，keydown是一个过程，只有在按键按下的过程中才会有对话框出现，按键抬起对话框立即消失。