【JQuery学习笔记】JQuery事件

最新推荐文章于 2025-05-28 11:39:43 发布

原创最新推荐文章于 2025-05-28 11:39:43 发布 · 642 阅读

0 ·

CC 4.0 BY-SA版权

JS学习笔记专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了JQuery中的各种事件处理方式，包括ready和onload的区别、鼠标与键盘事件、焦点事件、change事件、事件绑定与解绑、合成事件、一次事件、自定义事件等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQuery事件

JQuery事件

JQuery事件

JQuery基本事件

页面事件 ready和onload

ready: jquery的事件,页面上的所有DOM元素加载完成后执行，ready可以多次调用

$(document).ready(function(){ 
            $("#btn").click(function(){ 
                alert("hello world"); 
            }); 
        })
//可以简写为：
 $(function () {
            alert("hello world");
        })

onload ：原生JS的window对象下的事件，当页面上的所有DOM元素以及所有外部文件（图片、外部CSS、外部JavaScript等）加载完成之后才会执行，且多次调用仅会执行最后一个调用。
```
  window.onload = function(){
           alert("hello world");
  		}
```
区别：
1. ready只需等待所有html元素加载完后即执行，onload需要html以及外部文件完全加载之后再执行
2. ready可以多次调用执行，onload只会执行最后一次调用。

鼠标/键盘事件

名称	事件名
鼠标点击事件	click
鼠标按下事件	mousedown
鼠标松开事件	mouseup
鼠标移入事件	mouseover
鼠标移出事件	mouseout
鼠标移动事件	mousemove
键盘按下	keydown
键盘松开	keyup

焦点事件 focus和blur

focus 表示当获取焦点时触发的事件
blur 表示当失去焦点时触发的事件

仅 表单元素 与 超链接 具有焦点事件，focus也可以作为函数使用，意为使该元素获得焦点

例：

没有进入Input标签输入时设置默认值，退出如果还是为空将默认值继续带入

$(function(){
            $("#serach").focus(function(){
                $("#serach").val("");
            }).blur(function(){
                if( $("#serach").val() == "")
                    $("#serach").val("百度一下，你就知道");
            });
            
        });

<body>
    <input type="text" id="serach" value="百度一下，你就知道">
    <input type="button" value="搜索">
</body>

change事件

change事件常用于“具有多个选项的表单元素”中change事件在以下3种情况下被触发

单选框选择某一项时触发
复选框选择某一项时触发
下拉菜单选择某一项时触发

$(function () {
            //单选
            $('input[type="radio"]').change(function () {
                var ischecked = $(this).prop("checked");
                if (ischecked) {
                    $("#psex").text("你选择的是：" + $(this).val());
                }
            });
            //复选框

            $("#checkboxAll").change(function () {
                var ischecked = $(this).prop("checked");
                if (ischecked) {
                    $(".fruit").prop("checked", "checked");
                }
                else {
                    $(".fruit").prop("checked", null);
                }
            });
            //下拉框 
            $("select").change(function () {
                var value = $(":selected").val();
                alert(value);
            });
        });

 <div>性别:
        <label><input type="radio" name="sex" value="男生">男生</label>
        <label><input type="radio" name="sex" value="女生">女生</label>
        <p id="psex"></p>
    </div>
    <div >水果 <br>
        <input id="checkboxAll" type="checkbox"> <label for="checkboxAll">全选</label>
        <input id="checkbox1" type="checkbox" class="fruit" value="苹果"> <label for="checkbox1">苹果</label>
        <input id="checkbox2" type="checkbox" class="fruit" value="香蕉"> <label for="checkbox2">香蕉</label>
        <input id="checkbox3" type="checkbox" class="fruit" value="西瓜"> <label for="checkbox3">西瓜</label> <br>
    </div>
    <div> 爱好
        <select>
            <option value="篮球">篮球</option>
            <option value="羽毛球">羽毛球</option>
            <option value="乒乓球">乒乓球</option>
        </select>
       
    </div>

绑定/解绑事件

on ()

在jQuery中，如果想要为元素添加事件，有两种方法，一种是基本事件（如click()等），另一种是绑定事件。我们可以使用on()方法为元素绑定一个事件或者多个事件,基本用法为:$().on(type, fn)

type为事件类型，fn表示执行该事件的回调函数

绑定已有元素

等价于 $("#btn").click(function{})

 //为按钮绑定点击事件
    $(function(){
        $("#btn").on("click",function(){
            alert("hello world");
        });
    });

<input type="button" id = "btn" value="点击">

绑定动态元素

 //为动态添加的元素绑定事件
    $(function(){
           $("body").append('<input type="button" id="btn" value="点击"> '); 

         $("#btn").on("click",function(){
            alert("hello world");
         });
    });

off()

我们可以使用off()方法来解除元素绑定的事件。基本用法为：$().off(type)

type是可选参数，它是一个字符串，表示事件类型，默认为移除该元素所有事件

  //为动态添加的元素绑定事件
        $(function () {
            //为按钮添加绑定事件
            $("#btn").on("click", function () {
                alert("hello world");
            });
            //当解绑按钮按下后对上面的点击事件进行解绑
            $("#unbund").click(function () {
                $("#btn").off("click");
            });
        });

<body>
    <input type="button" id="btn" value="点击">
    <input type="button" id="unbund" value="解绑">
</body>

合成事件

hover()

鼠标（指针）移入和鼠标（指针）移出这两个事件往往都是配合起来使用的，而我们需要分别对这两个事件定义。为了简化代码，jQuery提供了hover()方法来一次性定义这两个事件，这就是所谓的合成事件。

 $(function () {
            $("div").hover(function () { //移入
                $(this).css("background-color", "chartreuse")
            }, function () { //移出
                $(this).css("background-color", "white")
            });
        });

 <div style="border: solid 1px #ccc;width: 300px;height: 200px;">
        <p>hello world</p>
    </div>

一次事件

one()

使用one()方法为元素添加一个“只触发一次”的事件,语法:$().one(type, fn)

 <script>
        $(function () {
            //给btn增加一个一次点击事件
            $('input[type="button"]').one("click", function () {
                alert("hello world");
            })
        });
    </script>

<body>
    <input type="button" value="点击">
</body>

自定义事件

on()&trigger()

使用on()方法来自定义一个事件，然后使用trigger()方法来触发自定义事件

  $(function () {
            //自定义一个事件，然后通过点击按钮触发这个事件
            $("#btn").on("myevent", function () {
                alert("hello world");
            });
            $("#btn").click(function(){
                $(this).trigger("myevent")
            });
            
        });

 <input type="button" value="点击" id="btn">

使用trigger()方法不仅可以触发自定义事件，还可以触发任何jQuery事件

event对象

  $(function () {
            $("#btn").click(function (e) {//第一个参数就是event对象  
                //type:事件的名称
                console.log(e.type); //输出:click
                //target:触发这个事件的元素
                console.log(e.target); //输出:<input type="button" value="点击" id="btn">
            });

        });