JavaScript | 事件绑定、鼠标事件、键盘事件、表单事件

最新推荐文章于 2024-04-08 17:30:57 发布

Bravo！！！

最新推荐文章于 2024-04-08 17:30:57 发布

阅读量779

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_47982238/article/details/107838222

版权

本文介绍了JavaScript中的各种事件，包括JS特效、事件绑定、鼠标事件（如onclick、onmousemove）、键盘事件（如onkeydown、onkeyup）、获取网页高度的方法以及表单事件（如onfocus、onchange）。通过实例展示了如何应用这些事件，例如鼠标移动获取坐标、循环点击切换图片、键盘控制图片移动、弹力球特效、页面滚动返回顶部等。

摘要由CSDN通过智能技术生成

一、JS特效

1.事件触发

2.属性改变

3.样式改变

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        img{
            cursor: pointer; /*鼠标移动到img上方变成小手*/
        } 
    </style>
</head>
<body>
    <img src="a.jpg" id="imgid" >
</body>
<script>
    //JS特效
    imgobj=document.getElementById('imgid');
    //事件触发：点击图片a.jpg
    imgobj.onclick=function(){
        //属性改变：改变图片为b.png
        imgobj.src='b.png';
        //样式改变：给图片设置边角弧线
        imgobj.style.borderRadius='256px';
    }
</script>
</html>

二、绑定事件

1.标签身上绑定（不建议用，代码冗长的话不合适）

<body>
    <img src="a.jpg" id="imgid" onclick="this.src='b.png'">
</body>

2.JS代码中绑定

如第一段代码

三、鼠标事件

• onclick //点击后触发事件

• ondblclick //双击后触发事件

• onmouseenter //鼠标移入触发事件

• onmouseleave //鼠标移出触发事件

• onmousemove //鼠标移动触发事件

举例：鼠标移动获取鼠标在文档内的坐标

实例：循环单击实现单击后，a、b图片循环

<script>
    imgobj=document.getElementById('imgid');
    i=0;
    imgobj.onclick=function(){
        if(i%2==0){
            imgobj.src="a.jpg";
        }else{
            imgobj.src="b.png";
        }
        i++;
    }
</script>

四、键盘事件

• onkeydown //按下键盘键触发事件

实例：按上下左右键实现图片在网页上的移动

• onkeyup //键盘键弹起触发事件：在验证码栏输入

最低0.47元/天解锁文章

Bravo！！！

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript | 事件绑定、鼠标事件、键盘事件、表单事件

一、JS特效1.事件触发2.属性改变3.样式改变<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title> <style> img{ cursor: pointer; /*鼠标移动到img上方变成小手*/ } &
复制链接

扫一扫