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>