JavaScript在实际项目中的事件函数茫茫多，本文主要是总结一下基本并且常用的事件函数：
1、鼠标事件：
onclick: 点击事件
ondblclick: 双击事件
onmouseover: 鼠标进入“某对象区域”
onmouseout: 鼠标离开“某对象区域”
onmousedown: 鼠标按下
onmouseup: 鼠标抬起
onmousemove: 鼠标移动。
2. 表单事件：
onsubmit：表单提交事件
onfocus：一个表单项获得焦点。（就是鼠标在输入框中点击，可以输入内容）
onblur: 一个表单项失去焦点。（就是鼠标离开输入框，在别的元素发生鼠标事件）
onchange: 一个表单项的内容的改变（通常用于select选项值的改变）
onreset: 表单重置事件
3. 键盘事件：
onkeydown： 按键按下去（尚未抬起来）
onkeyup： 按钮抬起来。
onkeypress: 按键一次(不包含功能键，比如退格键、回车键)。
4.窗口事件：
onload: 网页一打开时发生——准确点说，是网页加载完毕时发生。
onunload： 卸载
来一个简单的实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 300px; height: 200px; text-align: center; background: orangered; font: 30px/25px "微软雅黑"; color: white; } </style> </head> <body onload="alert('欢迎光临!')"> <!--双击--> <input type="button" id="btn1" value="双击我" ondblclick="f1();" /> <!--移入和移出--> <div id="box1" onmouseover="f2();" onmouseout="f3(this);"> 我是默认的文字 </div> <!--获取焦点和失去焦点--> <form action="" method="post"> <input type="text" id="userName" value="请输入用户名" onfocus="this.value='';" onblur="userCheck();" onkeyup="alert(event.keyCode);" /> <!--当选项发生改变时--> 籍贯： <select onchange="alert(this.value);"> <option>请选择</option> <option>广东省</option> <option>江西省</option> <option>福建省</option> </select> <input type="submit" value="提交"/> </form> <input type="button" id="" value="关闭窗口" onclick="window.close();" /> <script type="text/javascript"> function f1() { var b1=document.getElementById("btn1"); b1.style.fontSize="50px"; } function f2() { var box1=document.getElementById("box1"); box1.innerHTML="发发发!"; } function f3(bianliang) { //var box1=document.getElementById("box1"); //box1.innerHTML="我是默认的文字!"; bianliang.innerHTML="我是默认的文字!"; //this表示一个对象自己（元素节点对象） } //语句少可以直接写在事件上面，语句多最好定义成函数，在通过事件调用函数 //this.value==''?this.value='请输入用户名':''; function userCheck() { var yhm=document.getElementById("userName"); if(yhm.value=="") { yhm.value="请输入用户名"; } } </script> </body> </html>
JS常用事件
绑定事件监听函数
语法为：元素.addEventListener(事件名,执行程序,true/false
此方法可以重复绑定相同的事件，或是绑定多个事件，并且不需要加 on 前缀
<button id="isButton">按钮</button> <script> let isButton = document.getElementById('isButton'); isButton.addEventListener('click',function() { alert('事件响应'); }) </script>
注意：
参数 3 为可选项，如果为 true 表示事件处理程序以捕捉模式触发；从顶层的父节点开始触发事件，从外到内传播。简称事件捕获。 默认参数是 false，事件处理程序以冒泡模式触发；从最内层的节点开始触发事件，逐级冒泡 直到顶层节点，从内向外传播。简称事件冒泡。
