【JS基础】事件监听

最新推荐文章于 2023-09-23 08:02:02 发布

林月明

最新推荐文章于 2023-09-23 08:02:02 发布

阅读量1.2k

点赞数

文章标签： javaWeb 学习 java

本文链接：https://blog.csdn.net/qq_42294095/article/details/129873502

版权

一、需求描述

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

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

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

二、代码参考

创建文件夹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，页面效果如图：

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

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

<input id="b1" type="button" value="触发单击事件" onclick="fn1()">

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

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

 <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>

<table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmousedown="out()">

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

 <img id="p1" src="微笑.png"> <br><br>

var img=document.getElementById('p1');
        img.src="微笑.png";
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";
            }
        }
    }

三、知识点整理

常见事件

四、参考链接

1、黑马JavaWeb开发视频教程https://www.bilibili.com/video/BV1m84y1w7Tb?p=26&spm_id_from=pageDriver&vd_source=841fee104972680a6cac4dbdbf144b50

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

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

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

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

林月明

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JS基础】事件监听

hml、javaWeb、事件监听
复制链接

扫一扫