JS-事件处理
2024-10-19 14:05:21
1、一个简单的单击事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title> </head>
<body>
<button onclick="demo()">按钮</button>
<script>
function demo(){
alert("hello");
}
</script>
</body>
</html>
2、鼠标事件 onmouseout，onmouseover
当鼠标经过会显示“hello”，当鼠标移出会显示“world”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="div" onmouseout="onOut(this)" onmouseover="onOver(this)"></div>
<script>
function onOver(ooj){
ooj.innerHTML = "hello";
}
function onOut(ooj){
ooj.innerHTML = "world";
}
</script>
</body>
</html>
css代码：
.div{
width:100px;
height:100px;
background-color: aqua;
}
3、onchange，当内容改变了，弹出提示框（hello，内容改变了）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body> <form>
<input type="text" onchange="changeDemo(this)">
</form>
<script>
function changeDemo(bg){
alert("Hello 内容改变了");
}
</script>
</body>
</html>
或者这样写，达到的效果是一样的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body> <form>
<input type="text" onchange="alert('hello 内容改变了')">
</form> </body>
</html>
4、onselect，当在文本框中写点内容，然后选中这些内容时，背景颜色会变成红色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body> <form>
<input type="text" onselect="demo(this)">
</form> <script>
function demo(bg){
bg.style.background="red";
}
</script> </body>
</html>
5、onfocus，当光标点击之后，背景变成蓝色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body> <form>
<input type="text" onfocus="demo(this)">
</form> <script>
function demo(bg){
bg.style.background="blue";
}
</script> </body>
</html>
6、onload，当网页加载完毕后弹出：网页加载完毕
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body onload="demo()">
<script>
function demo(bg){
alert("网页内容加载完毕");
}
</script> </body>
</html>
最新文章
- ECharts的简单使用过程
- Servlet 工程 web.xml 中的 servlet 和 servlet-mapping 标签
- iOS开发——多线程篇——多线程介绍
- C#以及Oracle中的上取整、下取整方法
- 如何定义AIDL跨进程间通信
- 实例学习SSIS（二）--使用迭代
- 深入浅出SQL注入
- Hexo + github 打造个人博客
- 数据采集工具Telegraf：简介及安装
- supervisord.conf
- click模块使用
- No identifier specified for entity: springboot-jpa报错No identifier specified for entity
- Haskell语言学习笔记（47）Arrow（2）
- Bzoj2164 采矿（线段树+树链剖分）
- [COGS2580]偏序 II
- 使用PL/Scope分析PL/SQL代码
- 一加氢OS发布会 观看小结
- 【SSH网上商城项目实战27】域名空间的申请和项目的部署及发布
- 高精度整数 - a+b（王道）
- POJ 2217 LCS(后缀数组)