1.
onblur 元素失去焦点
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>
<style>
input{margin: 10px;}
.focus{background-color: yellow;}
.blur{background-color: white;}
</style>
</head>
<body>
<input type="text" onfocus="className='focus'" onblur="className='blur'"><br>
<input type="text" onfocus="className='focus'" onblur="className='blur'"><br>
<input type="text" onfocus="className='focus'" onblur="className='blur'"><br>
<input type="text" onfocus="className='focus'" onblur="className='blur'"><br>
</body>
</html>
2.
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>
<style>
input{margin: 10px; }
.change{background-color: red;}
</style>
</head>
<body>
<input type="text" value="abc" onchange="className='change'"><br>
<input type="text" value="def" onchange="className='change'"><br>
</body>
</html>
3.
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
<!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>
<style>
#div1{width: 200px;height: 200px;border: solid;}
.dblclick{background-color: red;}
.click{background-color: blue;}
</style>
</head>
<body>
<input type="button" value="点击一次变蓝,点击两次变红" onclick="document.getElementById('div1').className='click'" ondblclick="document.getElementById('div1').className='dblclick'">
<div id="div1"></div>
</body>
</html>
4.
onload 某个页面或图像被完成加载
常用于window.onload,放在head标签内表示当整个页面加载完成后在执行,避免找不到加载资源的情况。
5.
onmouseout 鼠标从某元素移开
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>
<style>
#div1{width: 200px;height: 200px;border: solid;}
.over{background-color: red;}
.out{background-color: blue;}
</style>
</head>
<body>
<div id="div1" onmouseout ="document.getElementById('div1').className='out'" onmouseover ="document.getElementById('div1').className='over'">放上为红,移开为蓝</div>
</body>
</html>