【JS基础】事件监听

一、需求描述

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

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

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

二、代码参考

【JS基础】事件监听_第1张图片

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




    
    
    
    事件触发


    
     

CSDN

林月明

弹琴 阅读 舞蹈


序号 项目 每次练习时长 每月练习天数
01 弹琴 1 20
02 阅读 0.5 30
03 弹琴 2 10

用浏览器打开hml,页面效果如图:

【JS基础】事件监听_第2张图片

 打开浏览器检查,点击页面相应按钮或操作鼠标后,呈现所需效果:【JS基础】事件监听_第3张图片

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

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

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

 

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

  

var img=document.getElementById('p1');
        img.src="微笑.png";
function bn1(){
        var ins=document.getElementsByName('hobby');
        var num=0;
        for(let i=0;i

三、知识点整理

常见事件

【JS基础】事件监听_第4张图片

 四、参考链接

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

你可能感兴趣的:(javaWeb,学习,java)