JS常用事件及实例

最新推荐文章于 2024-06-28 13:55:12 发布

人偶Q

最新推荐文章于 2024-06-28 13:55:12 发布

阅读量198

点赞数 1

本文链接：https://blog.csdn.net/RenOuQ/article/details/104731751

版权

js 鼠标事件

onclick：点击某个对象时触发
ondblclick：双击某个对象时触发
onmouseover：鼠标移入某个元素时触发
onmouseout：鼠标移出某个元素时触发
onmouseenter：鼠标进入某个元素时触发
onmouseleave：鼠标离开某个元素时触发
onmousedown：鼠标按下时触发
onmouseup：鼠标抬起时触发
onmousemove：鼠标被移动时触发
onwheel：鼠标滚轮滚动时触发
oncontextmenu：点击鼠标右键时触发

键盘事件

onkeydown：键盘的键按下时触发
onkeyup：键盘的键放开时触发
onkeypress：按下或按住键盘键时触发

框架/对象事件

onresize：浏览器窗口大小改变时触发
onabort：图形的加载被中断时触发
onload：元素加载完时触发
onerror：当加载文档或者图片时（没找到）发生的错误时触发
onscroll：文档滚动时触发
onpageshow：用户访问页面时触发
onunload：用户退出页面时触发

表单事件

onfocus：元素获得焦点时触发
onblur：元素失去焦点时触发
onchange：元素内容改变时触发
oninput：元素获取用户输入时触发
onsubmit：提交按钮时触发
onreset：重置按钮时触发
onselect：文本被选中时触发

拖动事件

ondrag：元素正在拖动时触发
ondragend：用户完成元素拖动时触发

多媒体事件

onplay：在视频/音频开始播放时触发
onended：在视频/音频播放结束时触发
onpause：在视频/音频暂停时触发

隔行变色（鼠标移动移开事件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
    <li>第四个</li>
    <li>第五个</li>
    <li>第六个</li>
    <li>第七个</li>
    <li>第八个</li>
    <li>第九个</li>
    <li>第十个</li>
</ul>

<script>
   
    var liObj = document.getElementsByTagName("li");
    for (var j = 0;  j< liObj.length; j++){
         if (j%2 == 0){
            liObj[j].style.backgroundColor="gray";

        }else{
            liObj[j].style.backgroundColor="pink";
                    }
    }
    for (var i = 0; i < liObj.length; i++){      
            liObj[i].onmouseover=function () {
                this.oldcolor = this.style.backgroundColor;
                this.style.backgroundColor="red";
            }
            liObj[i].onmouseout=function () {
                this.style.backgroundColor = this.oldcolor;
            }
    }

</script>
</body>
</html>

启用禁用(改变元素/点击)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div>
    <input type="text" placeholder="用户名" id = "inp1">
    <br>
    <input type="text" placeholder="密码" id = "inp2">
    <br>
    
</div>
<br />
<input type="button" value="禁用" id="btn">

<script>
    var btn = document.getElementById("btn");
    var arr1 = document.getElementById("inp1");
    var arr2 = document.getElementById("inp2");
    btn.onclick = function () {
        if (btn.value == "禁用") {
            btn.value = "启用";
            arr1.disabled = "disabled";
            arr2.disabled = "disabled";
        } else if (btn.value == "启用") {
            btn.value = "禁用";
            arr1.disabled = "";
            arr2.disabled = "";
        }


    };


</script>
</body>
</html>

开关灯(点击改变元素)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body id="bd">
<input type="button" value="关灯" id="btn">
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        if (this.value == "关灯") {
            this.value = "开灯";
            document.body.style.backgroundColor = "black";
        } else if (this.value == "开灯") {
            this.value = "关灯";
            document.body.style.backgroundColor = "";
        }
    }


</script>
</body>
</html>

人偶Q

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS常用事件及实例

js 鼠标事件onclick：点击某个对象时触发ondblclick：双击某个对象时触发onmouseover：鼠标移入某个元素时触发onmouseout：鼠标移出某个元素时触发onmouseenter：鼠标进入某个元素时触发onmouseleave：鼠标离开某个元素时触发onmousedown：鼠标按下时触发onmouseup：鼠标抬起时触发onmousemove：鼠标被移动时...
复制链接

扫一扫