← 返回首页
jQuery基础教程(五)
发表时间：2021-01-16 15:07:01
jQuery事件

1.什么是事件

事件（Event）是文档或者浏览器窗口中发生的，特定的交互瞬间。事件是javaScript和DOM之间交互的桥梁。你若触发，我便执行——事件发生，调用它的处理函数执行相应的JavaScript代码给出响应。

事件包含三元素：事件源(Source)、事件(Event)、事件处理程序(Handler)。

2.jQuery事件函数

jQuery 事件处理方法是 jQuery 中的核心函数。可以分为：鼠标事件、键盘事件、表单事件和窗口事件四大类。

3.常见鼠标事件

事件函数 解释
click() 触发、或将函数绑定到指定元素的单击事件
dblclick() 触发、或将函数绑定到指定元素的双击事件
mouseover() 触发、或将函数绑定到指定元素的鼠标经过事件
mouseleave() 触发、或将函数绑定到指定元素的鼠标离开事件
blur() 触发、或将函数绑定到指定元素的失去焦点事件
focus() 触发、或将函数绑定到指定元素的获得焦点事件

实例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jQuery基础教程-鼠标事件</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .gray {
            -webkit-filter: grayscale(1); /* Webkit */
            filter: gray; /* IE6-9 */
            filter: grayscale(1); /* W3C */
        }
    </style>
</head>
<body>
<div>
    <div>
        <input type="text" id="username" value="zhangsan"/><span id="errorMsg"></span>
    </div>
    <div>
        <img src="https://img.simoniu.com/power_off.jpg" id="power" style="cursor: pointer"/>
    </div>
    <div>
        <img src="https://img.simoniu.com/beatiful_girl01.jpg" id="girl" style="cursor: pointer"/>
    </div>
</div>

<script>
    let flag = false;
    $(function(){
        $("#username").blur(function(){
            if(this.value.length<=0){
                $("#errorMsg").text('用户名不能为空！').css("color","red");
            }else{
                $("#errorMsg").text('')
            }
        })

        $("#power").dblclick(function(){
            flag = !flag;
            if(flag){
                $("#power").attr("src","https://img.simoniu.com/power_on.jpg");
            }else{
                $("#power").attr("src","https://img.simoniu.com/power_off.jpg");
            }
        })

        $("#girl").mouseover(function(){
            console.log('mouseover');
            $("#girl").addClass("gray");
        })
        $("#girl").mouseleave(function(){
            console.log('mouseleave');
            $("#girl").removeClass("gray");
        })
    })
</script>
</body>
</html>

4.常用键盘事件

事件函数 解释
keydown() 触发、或将函数绑定到指定元素的 key down 事件
keypress() 触发、或将函数绑定到指定元素的 key press 事件
keyup() 触发、或将函数绑定到指定元素的 key up 事件

实例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jQuery基础教程-键盘事件</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div>
    用户名：<input type="text" id="username" value=""/><br>
    电子邮箱：<input type="text" id="email" value=""/><br>
</div>
<script>
    $(function(){
        $("#username").keypress(function(e){
            console.log("in keypress username:"+$("#username").val());
            console.log("in keypress keycode:"+e.keyCode);
        })

        $("#email").keydown(function(e){
            console.log("in keydown email:"+$("#email").val());
            console.log("in keydown keycode:"+e.keyCode);
        })

        $("#username,#email").keyup(function(){
            console.log("in keyup username:"+$("#username").val());
            console.log("in keyup email:"+$("#email").val());
        })
    })
</script>
</body>
</html>

keydown,keypress,keyup三者之间的区别: 按下键盘时会触发键盘事件，顺序为keydown -> keypress ->keyup。 keydown、keypress事件触发在文字还没敲进文本框，这时如果在keydown、keypress事件中输出文本框中的文本，得到的是触发键盘事件前的文本，而keyup事件触发时整个键盘事件的操作已经完成，获得的是触发键盘事件后的文本。

keypress与keydown与keyup的主要区别： （1）对中文输入法不友好，无法响应中文输入； （2）无法响应系统功能键（比如delete，backspace）； （3）由于前面两个限制，keyCode与keydown和keyup不是很一致；keypress的keyCode参照ASCII。而keydown与keyup的keyCode参照下图。

5.表单事件

事件函数 解释
submit() 触发表单的 submit 事件
change() 触发指定元素的change 事件

实例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jQuery基础教程-表单事件</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div>
    <form id="loginForm" action="loginok.html" method="get">
        用户名：<input type="text" id="username" value="">
        籍贯: <select id="province" value=""></select> <select id="city" value=""></select>
        <input type="submit" value="登录"/>
    </form>
</div>

<script>
    let provinces = ['河北','河南','山东','山西'];
    let citys =[
        ['石家庄','保定','沧州','唐山','邯郸'],
        ['郑州','洛阳','开封','南阳','驻马店'],
        ['济南','青岛','泰安','烟台','日照'],
        ['太原','大同','晋中','运城','临汾'],
    ];
    let currentProvinceIndex = 0;
    //初始化省份列表
    function initProvinceList(){
        provinces.forEach(function(v,i){
            let provinceHTML ="";
            if(i==0){
                provinceHTML = '<option selected>'+v+'</option>'
            }else{
                provinceHTML = '<option>'+v+'</option>'
            }
            $("#province").append(provinceHTML);
        });
    }
    //初始化城市列表
    function initCityList(index){
        $("#city").empty();
        citys[currentProvinceIndex].forEach(function(v,i){
            let cityHTML ="";
            if(i==0){
                cityHTML = '<option selected>'+v+'</option>'
            }else{
                cityHTML = '<option>'+v+'</option>'
            }
            $("#city").append(cityHTML);
        });
    }

    $(function(){

        initProvinceList();
        initCityList(currentProvinceIndex);

        $("#province").change(function(){
            currentProvinceIndex = $("#province").get(0).selectedIndex;
            //更新城市列表
            initCityList(currentProvinceIndex);
        })
        $("#loginForm").submit(function(){
            console.log('执行登录...');
            if($("#username").val().length<=0) {
                alert('用户名不能为空！');
                return false; //返回 false 则不执行表单提交。
            }
            let username = $("#username").val();
            let provice = $("#province").val();
            let city = $("#city").val();
            alert("登录成功，用户名："+username+" 籍贯："+provice+","+city);
            return true;
        })
    })
</script>
</body>
</html>

6.窗口事件

事件函数 解释
load() 触发、或将函数绑定到指定元素的 load 事件
resize() 触发、或将函数绑定到指定元素的 resize 事件
scroll() 触发、或将函数绑定到指定元素的 scroll 事件

实例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jQuery基础教程-窗口事件</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div>
<img style="width: 30%" src="https://img.simoniu.com/%E6%B5%8B%E8%AF%95%E7%94%A8%E5%A3%81%E7%BA%B8001.jpg" id="mypic"/>
<br>
<textarea rows="20" cols="40" id="content" placeholder="写点什么吧！">
</textarea>
</div>
<script>
    $("#mypic").on('load',function(){
        alert('图片加载完毕！');
    })
    $(function(){
        $(window).resize(function(){
            let w = window.innerWidth;
            let h = window.innerHeight;
            console.log('正在更改尺寸....,width:'+w+",height:"+h);
        })
    })
</script>
</body>
</html>