【JS基础】事件监听

迷南。 2023-10-11 21:26 42阅读 0赞

**一、需求描述**

1、点击按钮，实现控制台输出语句和弹出提示框

2、实现对鼠标、键盘、按钮得事件监听

3、对多选按钮，选中数量不同时页面更新不同的图片

**二、代码参考**

![59986ff7324d425a84ae0c50d1b9fbee.png][]

创建文件夹EMO，在文件夹中加入三张需要用到的图片，新建.txt文件并改名为LYM.html，html代码参考如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>事件触发</title>
    </head>
    <body onload="load()">
        
        <img id="p1" src="微笑.png"> <br><br>
    
        <div class="cls">CSDN</div> <br>
        <div class="cls">林月明</div> <br>
    
        <input type="checkbox" name="hobby" onclick="bn1()"> 弹琴
        <input type="checkbox" name="hobby" onclick="bn1()"> 阅读
        <input type="checkbox" name="hobby" onclick="bn1()"> 舞蹈
    
        <form action="" style="text-align: center;" onsubmit="subfn()">
            <input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
            <input id="b1" type="submit" value="提交">
            <input id="b1" type="button" value="触发单击事件" onclick="fn1()">
        </form>
        
        <br><br>
        <table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmousedown="out()">
            <tr>
                <th>序号</th>
                <th>项目</th>
                <th>每次练习时长</th>
                <th>每月练习天数</th>
            </tr>
            <tr align="center">
                <td>01</td>
                <td>弹琴</td>
                <td>1</td>
                <td>20</td>
            </tr>
            <tr align="center">
                <td>02</td>
                <td>阅读</td>
                <td>0.5</td>
                <td>30</td>
            </tr>
            <tr align="center">
                <td>03</td>
                <td>弹琴</td>
                <td>2</td>
                <td>10</td>
            </tr>
        </table>
    </body>
        <script>
            
            var img=document.getElementById('p1');
            img.src="微笑.png";
    
    
            //在所有div标签内容后面加上hello（蓝色字体）
            var divs=document.getElementsByTagName('div');
            for(let i=0;i<divs.length;i++){
                const div=divs[i];
                div.innerHTML+="<font color='green'>hello</font>";
            }
            /*
            //使所有的复选框呈现选中状态
            var ins=document.getElementsByName('hobby');
            for(let i=0;i<ins.length;i++){
                const check=ins[i];
                check.checked=true;//选中
            }
            */
    
            //选择一项爱好，保持微笑
            //选择两项爱好，变为喜悦
            //选择亮相爱好，变为痴迷
            function bn1(){
                var ins=document.getElementsByName('hobby');
                var num=0;
                for(let i=0;i<ins.length;i++){
                    const check=ins[i];
                    if( check.checked==true){
                        num++;
                    }
                    if(num==2){
                        img.src="喜悦.png";
                    }
                    if(num==3){
                        img.src="痴迷.png";
                    }
            }
        }
    
            //加载成功
            function load(){
                console.log("加载成功...");
            }
    
            //点击触发事件按钮
            function fn1(){
                console.log("单击触发事件...");
                alert("你单击了事件触发按钮！")
            }
            
            //元素失去焦点
            function bfn(){
                console.log("失去鼠标焦点...");
            }
    
            //元素获得焦点
            function kfn(){
                console.log("键盘被按下了...");
            }
    
            function ffn(){
                console.log("获得鼠标焦点...")
            }
    
            function over(){
                console.log("鼠标移入...")
            }
    
            function out(){
                console.log("鼠标移出...")
            }
    
            function subfn(){
                console.log("表单被提交了...")
            }
    
    
        </script>
    
    </html>

用浏览器打开hml，页面效果如图：

![3a92f0afb3994ea9aff70c59be10afa6.png][]

打开浏览器检查，点击页面相应按钮或操作鼠标后，呈现所需效果：![549b181798dc42e98c4a683b985d95fe.png][]

1、点击按钮，实现控制台输出语句和弹出提示框

//点击触发事件按钮
            function fn1(){
                console.log("单击触发事件...");
                alert("你单击了事件触发按钮！")
            }

2、实现对鼠标、键盘、按钮得事件监听

3、对多选按钮，选中数量不同时页面更新不同的图片

**三、知识点整理**

常见事件

![402e269774b94d429a618a702ed3f691.png][]

**四、参考链接**

1、黑马JavaWeb开发视频教程[https://www.bilibili.com/video/BV1m84y1w7Tb?p=26&spm\_id\_from=pageDriver&vd\_source=841fee104972680a6cac4dbdbf144b50][https_www.bilibili.com_video_BV1m84y1w7Tb_p_26_spm_id_from_pageDriver_vd_source_841fee104972680a6cac4dbdbf144b50]

2、工具VS Code下载链接[https://code.visualstudio.com/][https_code.visualstudio.com]

3、Java前端官网教程（HTML、CSS、JS)[https://www.w3school.com.cn/html/index.asp][https_www.w3school.com.cn_html_index.asp]

4、JSON格式化工具在线校验[https://tool.oschina.net/codeformat/json][https_tool.oschina.net_codeformat_json]

5、iconfont图库[https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2][https_www.iconfont.cn_home_index_spm_a313x.7781069.1998910419.2]

[59986ff7324d425a84ae0c50d1b9fbee.png]: https://img-blog.csdnimg.cn/59986ff7324d425a84ae0c50d1b9fbee.png
[3a92f0afb3994ea9aff70c59be10afa6.png]: https://img-blog.csdnimg.cn/3a92f0afb3994ea9aff70c59be10afa6.png
[549b181798dc42e98c4a683b985d95fe.png]: https://img-blog.csdnimg.cn/549b181798dc42e98c4a683b985d95fe.png
[402e269774b94d429a618a702ed3f691.png]: https://img-blog.csdnimg.cn/402e269774b94d429a618a702ed3f691.png
[https_www.bilibili.com_video_BV1m84y1w7Tb_p_26_spm_id_from_pageDriver_vd_source_841fee104972680a6cac4dbdbf144b50]: https://www.bilibili.com/video/BV1m84y1w7Tb?p=26&spm_id_from=pageDriver&vd_source=841fee104972680a6cac4dbdbf144b50
[https_code.visualstudio.com]: https://code.visualstudio.com/
[https_www.w3school.com.cn_html_index.asp]: https://www.w3school.com.cn/html/index.asp
[https_tool.oschina.net_codeformat_json]: https://tool.oschina.net/codeformat/json
[https_www.iconfont.cn_home_index_spm_a313x.7781069.1998910419.2]: https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2