版权声明：技术分享，转载附上笔者链接即可 https://blog.csdn.net/lwqBrell/article/details/88564937
onclick鼠标点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button onclick="show()">点击</button>
<script>
function show(){
alert('onclick');
}
</script>
</body>
</html>onmouseover鼠标经过事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button onmouseover="show()">鼠标经过</button>
<script>
function show(){
alert('onmouseover');
}
</script>
</body>
</html>onmouseout鼠标移出事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button onmouseout="show()">鼠标移出</button>
<script>
function show(){
alert('onmouseout');
}
</script>
</body>
</html>onfocus鼠标聚焦事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
鼠标聚焦事件<input onfocus="show()">
<script>
function show(){
alert('onfocus');
}
</script>
</body>
</html>onblur失焦事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
鼠标失焦事件<input onblur="show()">
<script>
function show(){
alert('onblur');
}
</script>
</body>
</html>onchange文本框内容改变事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
鼠标失焦事件<input onchange="show()">
<script>
function show(){
alert('onchange');
}
</script>
</body>
</html>onload加载事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body onload=show()>
<script>
function show(){
alert('onload');
}
</script>
</body>
</html>onunload卸载事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
window.onunload = onunload_msg;
function onunload_msg()
{
alert("您确定离开该网页吗？");
}
</script>
</body>
</html>