前端常见的事件,案例源码htmlcssjs

2024-12-29 约 918 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=130704954

前端常见的事件，案例源码html+css+js

一. 点击事件 1. onclick：单击事件 2. ondblclick：双击事件二. 焦点事件 1. onblur：失去焦点 2. onfocus:元素获得焦点。三. 加载事件 1. onload：一张页面或一幅图像完成加载。四. 鼠标事件 1. onmousedown 鼠标按钮被按下。 2. onmouseup 鼠标按键被松开。 3. onmousemove 鼠标被移动。 4. onmouseover 鼠标移到某元素之上。 5. onmouseout 鼠标从某元素移开。五. 键盘事件 1. onkeydown 某个键盘按键被按下。 2. onkeyup 某个键盘按键被松开。 3. onkeypress 某个键盘按键被按下并松开。六. 选择和改变 1. onchange 域的内容被改变。 2. onselect 文本被选中。七. 表单事件 1. onsubmit 确认按钮被点击。 2. onreset 重置按钮被点击。

一. 点击事件

onclick：单击事件

html+css+js

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="E:\实验项目 1\text2\2.css">
<script src="E:\实验项目 1\text2\3.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>

<body>
<div class="control">
<div id="q" class="q">下拉标题 1
<div id="q_news" class="q_news">
内容 1
</div>
</div>

        <div id="w" class="w">下拉标题2
            <div id="w_news" class="w_news">
                内容2
            </div>
        </div>

    </div>

</body>

</html>

/_css_/
.control {
display: flex;
justify-content: center;
}

.q,
.w {
width: 100px;
height: 26px;
background-color: orange;
margin-right: 20px;
text-align: center;
}

.q_news,
.w_news {
width: 100px;
height: 200px;
color: black;
background-color: #F7F2E4;
display: none;
}

// 特别声明：因为这里用 JS 的 onmouseout onmouseover 来判断有没有悬停 ，所以下面样式和 hover 相关的就废除
window.onload = function() {
// 根据 ID 获取元素的操作对象
var q = document.getElementById('q')
var q_news = document.getElementById('q_news')
var w = document.getElementById('w')
var w_news = document.getElementById('w_news')

    // 初始化显示 页面一打开就显示
    q.setAttribute("style", "background-color: orangered;color: white;")
    q_news.style.display = 'block'

    // 如果鼠标碰到了 （鼠标悬停时onmouseover 和悬停离开后onmouseout的方法）
    w.onclick = w.onclick = function() {
        // 恢复原始样式
        q.setAttribute("style", "background-color: orange;")
        q_news.style.display = 'none';
        // 设置下拉标题1
        w.setAttribute("style", "background-color: orangered;color: white;")
        w_news.style.display = 'block';
    }

    // 如果鼠标碰到了
    q.onclick = q.onclick = function() {
        // 恢复原始样式
        w.setAttribute("style", "background-color: orange;")
        w_news.style.display = 'none';
        // 设置下拉标题2
        q.setAttribute("style", "background-color: orangered;color: white;")
        q_news.style.display = 'block';
    }

}

ondblclick：双击事件

同上，onclick 替换成 ondblclick 即可。

二. 焦点事件

onblur：失去焦点。
onfocus:元素获得焦点。

三. 加载事件

onload：一张页面或一幅图像完成加载。

四. 鼠标事件

onmousedown 鼠标按钮被按下。
onmouseup 鼠标按键被松开。
onmousemove 鼠标被移动。
onmouseover 鼠标移到某元素之上。

同 1，onclick 替换成 onmouseover 即可。

onmouseout 鼠标从某元素移开。

五. 键盘事件

onkeydown 某个键盘按键被按下。
onkeyup 某个键盘按键被松开。
onkeypress 某个键盘按键被按下并松开。

六. 选择和改变

onchange 域的内容被改变。
onselect 文本被选中。

七. 表单事件

onsubmit 确认按钮被点击。
onreset 重置按钮被点击。

目录

前端常见的事件,案例源码htmlcssjs

前端常见的事件，案例源码html+css+js