jQuery：事件

1 滑鼠事件

滑鼠事件是當使用者在文檔上移動或單擊滑鼠時而産生的事件，常用滑鼠事件有：

方法	描述	執行時機
click( )	觸發或将函數綁定到指定元素的click事件	單擊滑鼠時
mouseover( )	觸發或将函數綁定到指定元素的mouse over事件	滑鼠移過時
mouseout( )	觸發或将函數綁定到指定元素的mouse out事件	滑鼠移出時

<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("img").click( function(){
        //點選一下，換照片
        $(this).attr( "src","img/2.jpg" ); //this就是事件觸發的源頭
    } );

    $("img").mouseover( function(){ //移動到元素上
        $(this).css( "border","2px solid red" );
    } );

    $("img").mouseout( function(){ //離開元素
        $(this).css( "border","2px solid white" );
    } );

</script>      

2 鍵盤事件

使用者每次按下或者釋放鍵盤上的鍵時都會産生事件，常用鍵盤事件有：

keydown( )	觸發或将函數綁定到指定元素的keydown事件	按下鍵盤時
keyup( )	觸發或将函數綁定到指定元素的keyup事件	釋放按鍵時

<input>
<h3></h3>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("input").keyup( function(){
    var str = $(this).val(); // 擷取框中的值
    $("h3").text( str ); // 将h3元素中的文本内容更改為str
} );
</script>      

3 表單事件

當元素獲得焦點時，會觸發focus事件，失去焦點時，會觸發blur事件，詳見下表：

focus( )	觸發或将函數綁定到指定元素的focus事件	獲得焦點
blur( )	觸發或将函數綁定到指定元素的blur事件	失去焦點

<form action="">
    <p>帳号: <input id="a" value="請輸入帳号..."> </p>
    <p>電話: <input id="b"> </p>
</form>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    //獲得焦點（激活/點選一下）
    $("#a").focus(function(){
        $(this).val("");
    });

    //失去焦點（未激活/未點選）
    $("#a").blur(function(){
        $(this).val("請輸入帳号...");
    });
</script>      

4 滑鼠懸停複合事件

hover()方法相當于mouseover與mouseout事件的組合

<img src="img/3.jpg" width="400">

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("img").hover(
        function(){
            $(this).css("border","5px solid red");
        },
        function(){
            $(this).css("border","5px solid white");
        }
    );
</script>      

5 連續點選複合事件

toggle()可以模拟滑鼠的連續單擊事件

<h2>修仙小說</h2>
<ul>
    <li>凡人修仙傳</li>
    <li>遮天</li>
    <li>神墓</li>
    <li>殘袍</li>
    <li>大主宰</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("h2").click(function(){
    $("ul").toggle(); // 連續點選，ul的可見和隐藏進行切換
    });
</script>      

6 事件的動态綁定

對dom元素綁定事件的另一種寫法

$(".del").on('click', function() {
    alert('hello');
})      

$(".del").on('click mouseover', function() {
    alert('hello');
})