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>