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');
})