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>简易的表单验证：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="d1">
<form action="dataForm.html" method="post" onsubmit="return checkForm();">
<p>用户账号：<input type="text" id="yhm" /><span>用户名长度6~18位</span></p>
<p>登录密码：<input type="password" id="pwd" /><span>密码长度6~12位</span></p>
<p><input type="submit" value="登 录" /></p>
</form>
</div>
<script type="text/javascript">
//表单验证的思路
//如果用户提交的数据合法就允许提交到后台，否则就阻止提交表单。
//1 提交表单的事件？onsubmit
//提交表单是就应该调用一个验证数据合法性的函数
//onsubmit="checkForm();"
//return checkForm(); 就是把验证数据的结果进行返回
//2 写验证函数
function checkForm() {
var yhm=document.getElementById("yhm");
var pwd=document.getElementById("pwd");
if(yhm.value=="")
{
alert("请输入用户名!");
yhm.focus(); //获取用户名的焦点
return false; //阻止提交
}
else if(yhm.value.length<6 || yhm.value.length>18)
{
alert("用户名长度必须在6~18位之间!");
yhm.focus(); //获取用户名的焦点
return false; //阻止提交
}
else if(pwd.value=="")
{
alert("请输入密码!");
pwd.focus(); //获取用户名的焦点
return false; //阻止提交
}
else if(pwd.value.length<6 || pwd.value.length>12)
{
alert("密码长度必须在6~12位之间!");
pwd.focus(); //获取用户名的焦点
return false; //阻止提交
}
//如果还有很多表单项目，照此方法依次验证
}
</script>
</body>
</html>监听事件（addEventListener）
1、浏览器时间
load： 页面全部资源加载完毕
scroll： 浏览器滚动时候触发——window.scrollX/Y
——document.documentElement.scrollLeft
resize： 浏览器窗口大小发生改变时触发
2、鼠标事件：
click: 点击事件（鼠标左键）
dblclick： 双击事件
contextmenu： 右键单击事件
mousedown： 鼠标按下事件
mouseup： 鼠标抬起事件
mousemove：鼠标移动
（该事件是源源不断的，如果对每个mousemove事件都加以处理的话，则页面会因为高频率的操作导致抖动问题。，此时可以加入“防抖”功能，比如说在100个mousemove事件，只选择性地处理其中一个，来说实现节流和防抖。）
关于防抖和节流的问题，大家可以去看看我的另一篇文章：防抖、节流
mouseover：鼠标移入事件
mouseout： 鼠标移出事件
mouseenter： 鼠标移入事件（该事件不会冒泡）
mouseleave：鼠标移出事件
3、键盘事件：
keydown： 键盘按下事件
keyup： 键盘抬起事件
keypress： 键盘按下再抬起事件
关于按下具体键：e.keyCode/e.which 得到的值都是字符集里的码点
键盘事件的案例，可以参考本人的另一篇博客：打字游戏
4、表单事件
focus：表单元素得到焦点
bur： 表单元素失去焦点
input： 每改变一个字符时触发
change： 表单内容改变事件（敲回车或光标点击别处）
submit： 表单提交事件（form.onsubmit）
5、触摸事件
touchstart： 触摸开始事件
touchend： 触摸结束事件
touchmove： 触摸移动事件
...
以下是监听事件的绑定方式的简单实例：
<!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>02_事件的绑定方式</title>
</head>
<body>
<div id="box">点我试试看</div>
<script>
var div = document.querySelector("#box")
// 【注册】事件的方式只能绑定一个函数
// div.onclick = function () {
// console.log('我被点击了')
// }
// div.onclick = function () {
// console.log('我做的第二件事情')
// }
// 注销事件监听器
// div.onclick = null
/* 绑定式事件监听器 */
// add 添加 event 事件 listener 监听器
// div.addEventListener(
// // 事件类型
// "click",
// // 事件监听器（函数）
// function(e){
// console.log("我被点击了1");
// }
// )
// div.addEventListener(
// "click",
// function(e){
// console.log("我被点击了2");
// }
// )
/* 事件监听器是函数=引用数据类型=传参就是地址传递=可以直接传递函数名（其实就是函数地址） */
function clickHandler1(e) {
console.log('我被点击了1')
}
var clickHandler2 = function (e) {
console.log("我的第二个事情2");
}
div.addEventListener(
"contextmenu",
clickHandler1
)
div.addEventListener(
"contextmenu",
clickHandler2
)
/* 有add就有remove 移除事件监听器clickHandler */
// 事件监听器需要常驻内存 24小时保持警惕 开销较大 所以不用时要及时移除 以节约系统内存
div.removeEventListener("contextmenu",clickHandler2)
// div.removeEventListener("click", handler2);
</script>
</body>
</html>
扫一扫
586
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
