一、事件的含义
JavaScript事件是指在文档或者浏览器中发生的一些特定交互瞬间，比如打开某一个网页，浏览器加载完成后会触发load事件，当鼠标悬浮于某一个元素上时会触发hover事件，当鼠标点击某一个元素时会触发click事件等等。
二、事件组成以及特点
事件由三部分组成
事件源 ：给哪个元素/标签/节点来绑定事件
事件类型(某种状态) ： eg：点击状态
事件处理程序（事件句柄：handler）
事件函数的特点
全小写、以on开头+事件名，如onclick
三、事件的绑定方式
3.1、行内式
<div class="box" onclick="console.log(66666)">hello</div>
3.2、属性绑定（只能绑定一个处理程序handler，如果绑定多个，只有最后一个生效）
<div class="box">hello</div>
<script>
var box = document.querySelector('.box');
//对象添加属性 点语法
box.onclick = function(){
console.log('你购买了装备');
}
box.onclick = function(){
console.log('你购买了装备2');
}
</script>
image.png
3.3、给元素添加一个事件监听器（推荐）
3.3.1、addEventListener介绍
addEventListener() 方法用于向指定元素添加事件处理程序（事件句柄handler）。
参数1：enent（事件类型） 必须。字符串，指定事件名。
注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。
参数2：function 必须。指定要事件触发时执行的函数。
注意：事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
参数3：useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
- true - 事件处理程序（事件句柄）在捕获阶段执行
- false- false- 默认。事件处理程序（事件句柄）在冒泡阶段执行
3.3.2、addEventListener给元素绑定事件
var box = document.querySelector('.box');
//给元素添加一个事件监听器 （绑定事件处理程序）
box.addEventListener('click',function(){
console.log(666);
});
console.log(999);
优点一
- 不阻断代码
分析：还没点击，就打印出999，点击后打印出666，说明 addEventListener()函数并不阻断代码执行。
优点二
- 可以绑定多个handler,且不影响行内绑定的
<body>
<style>
.box{
width: 200px;
height: 200px;
background-color: #bfa;
}
</style>
<div class="box">hello</div>
<script>
var box = document.querySelector('.box');
//给元素添加一个事件监听器 （绑定事件处理程序）
box.addEventListener('click',function(){
console.log(6661);
});
box.addEventListener('click',function(){
console.log(6662);
});
</script>
</body>
分析：一点击按钮，就会打印出 6661 和 6662
四、事件的解绑
4.1、行内和属性绑定的解绑: 元素.onclick = null;
行内解绑
<div class="box" onclick="null">hello</div>
属性绑定解绑
<div class="box">hello</div>
<script>
var box = document.querySelector('.box');
//绑定点击事件 属性要保存函数
box.onclick = function(){
console.log(6666);
}
//解绑 不让你保存函数，不就是解绑了么
box.onclick = null; //false也可以
</script>
4.2、事件监听器的解绑
注意！！！这里的绑定和解绑的函数一定是同一个
<body>
<div id="xiake">下课</div>
<script>
var xiake = document.querySelector("#xiake");
function fn1() {
console.log("fn1执行");
}
//给xiake元素添加一个监听事件
xiake.addEventListener("click", fn1);
//移除对应的元素的对应的监听程序
xiake.removeEventListener("click", fn1);
</script>
</body>
4.3、事件解绑的应用
抢红包
抢红包时，一旦点击了抢红包按钮，函数正常运行，就会连接后台，会很卡，因为突然很多人在抢(点的那一刻，大家都在同一台服务器发送网络请求)，此时就点不动（如果还能点动，函数又运行，更卡，所以不合理），抢红包的按钮就只按一下，运行了就不能点了。所以怎么实现函数运行（一点击），就不能再点击（运行了）？解绑就可以了。
<body>
<div class="box">抢红包</div>
<script>
var box = document.querySelector(".box");
//绑定点击事件 属性要保存函数
box.onclick = function () {
box.onclick = null;
console.log('红包已经点击，再次点击无效');
};
</script>
</body>
五、JavaScrip脚本可以处理的事件
| 事件类型 | 事件 | 说明 |
|---|---|---|
| 表单相关 | onfocus | 当某个元素获得焦点时触发此事件。 |
| 表单相关 | onblur | 当某个元素失去焦点时触发此事件。 |
| 表单相关 | onchange | 当某个元素失去焦点并且元素的内容发生改变时触发此事件。 |
| 表单相关 | onsubmit | 提交表单时触发此事件。 |
| 表单相关 | onreset | 表单被重置时触发此事件 |
| 鼠标相关 | onclick | 单击鼠标时触发此事件 |
| 鼠标相关 | ondblclick | 双击鼠标时触发此事件。 |
| 鼠标相关 | onmousedown | 按下鼠标时触发此事件。 |
| 鼠标相关 | onmouseup | 按下鼠标后松开鼠标时触发此事件。 |
| 鼠标相关 | onmouseover | 当鼠标移动到某元素的区域时触发此事件。 |
| 鼠标相关 | onmousemove | 当鼠标在某元素的区域内移动时触发此事件。 |
| 鼠标相关 | onmouseout | 当鼠标离开某元素的区域时触发此事件。 |
| 键盘相关 | onkeypress | 键盘上的键被按下并释放时触发此事件。可处理单键的操作。 |
| 键盘相关 | onkeydown | 键盘上的键被按下时触发此事件。可处理单键或组合键的操作。 |
| 键盘相关 | onkeyup | 键盘上的键被按下后松开时触发此事件。可处理单键或组合键的操 |
| 页面相关事件 | onload | 当页面完成加载时触发此事件。 |
| 页面相关事件 | onunload | 当离开页面时触发此事件。 |
| 页面相关事件 | onresize | 当窗口大小改变时触发此事件。 |
5.1、onfocus获得焦点和onblur失去焦点事件
演示处理
onfocus和onblur事件。当焦点进入网页上的username文本输入框，该输入框的背景色变为绿色，当焦点离开，背景色改为白色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>onfocus获得焦点和onblur失去焦点事件</title>
</head>
<body>
<form name="myform">
username：
<input
type="text"
name="username"
onfocus="dofocus()"
onblur="doblur()"
/>
</form>
<script>
function dofocus() {
// 获得当前的事件
var event = window.event;
// 获得触发当前事件的元素
var element = event.srcElement;
// 把元素的背景色改为绿色
element.style.background = "#00FF00";
}
function doblur() {
// 获得当前的事件
var event = window.event;
// 获得触发当前事件的元素
var element = event.srcElement;
// 把元素的背景色改为白色
element.style.background = "#FFFFFF";
}
</script>
</body>
</html>
在
dofocus()函数中，window.event表示当前的onfocus事件，event.srcElement表示触发当前事件的文本输入框，element.style.background表示文本输入框的背景色。
5.2、onsubmit表单提交和onreset表单重置事件
当用户按下表单中的提交按钮，会触发
onsubmit事件，按下重置按钮，会触发onreset事件。 以下输入框的type属性的值分别为submit和reset，分别表示提交按钮和重置按钮：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>onsubmit表单提交和onreset表单重置事件</title>
</head>
<body>
<form name="myform" action="hello.jsp" onsubmit="return dosubmit()">
username：<input type="text" name="username" />
<input type="submit" value="submit" />
<input type="reset" value="reset" />
</form>
<script>
function dosubmit() {
var isSubmit = true;
if (myform.username.value == "") {
alert("Please input username.");
isSubmit = false;
}
return isSubmit;
}
</script>
</body>
</html>
以上
dosubmit()函数会检查username文本输入框，如果值为空，就提示用户输入username，并返回false；否则返回true。因此，只有当username文本输入框不为空，浏览器才会把表单提交给后端的hello.jsp
5.3. onclick鼠标单击事件
当用户单击按钮，会触发
onclick事件，执行doClick方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>onclick鼠标单击事件</title>
</head>
<body>
<button onclick="doClick()">点我</button>
<script>
function doClick() {
alert("clicked");
}
</script>
</body>
</html>
5.4. ondblclick鼠标双击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ondblclick鼠标双击事件</title>
</head>
<body>
<button ondblclick="doDblClick()">点我</button>
<script>
function doDblClick() {
alert("dblClicked");
}
</script>
</body>
</html>
5.5、onmouseover鼠标移入和onmouseout鼠标移出事件
当用户在网页上把鼠标移入某个元素的区域，会触发
onmouseover事件，把鼠标移出某个元素的区域，会触发onmouseout事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>onmouseover鼠标移入和onmouseout鼠标移出事件</title>
</head>
<body>
<img
src="logo.gif"
onmouseover="visible(this,1)"
onmouseout="visible(this,0.3)"
/>
<script>
function visible(element, n) {
// 设置图片的透明度
element.style.opacity = n;
}
</script>
</body>
</html>
显示一张图片，当鼠标移入该图片区域，图片的透明度设为1，当鼠标移出该图片区域，透明度设为0.3
注意
绑定事件函数里面的
this，同样遵循谁调用，this指向谁的原则，在这里img绑定了点击事件，因此这里的this指向函数的调用者img元素
5.6、onkeydown按键事件
当用户在网页上按下键盘的键就会触发
onkeydown事件。
下面的例子，按下键盘的LEFT、RIGHT、UP、DOWN键，色块就会向相应的方向移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>onkeydown</title>
</head>
<body>
<div id="box"></div>
<script>
// 获取页面中id为box的元素
var box = document.getElementById("box");
box.style.position = "absolute"; // 色块绝对定位
box.style.width = "20px"; // 色块宽度
box.style.height = "20px"; // 色块高度
box.style.backgroundColor = "red"; // 色块背景色
// 指定处理onkeydown事件的函数
document.onkeydown = dokeydown;
// 方向键控制色块移动
function dokeydown() {
var event = window.event;
switch (
event.keyCode // 获取当前按下键盘键的编码
) {
case 37: // 按下LEFT箭头键，向左移动5个像素
box.style.left = box.offsetLeft - 5 + "px";
break;
case 39: // 按下RIGHT箭头键，向右移动5个像素
box.style.left = box.offsetLeft + 5 + "px";
break;
case 38: // 按下UP箭头键，向上移动5个像素
box.style.top = box.offsetTop - 5 + "px";
break;
case 40: // 按下DOWN箭头键，向下移动5个像素
box.style.top = box.offsetTop + 5 + "px";
break;
}
}
</script>
</body>
</html>
在
dokeydown()函数中，event.keyCode表示键的键码。每个键都有固定的键码，例如LEFT、RIGHT、UP、DOWN键的键码分别为37、39、38、40。
5.7. onload页面加载和onunload页面卸载事件
当用户访问某个网页，浏览器就会先加载该网页，此时会触发
onload事件。当用户离开网页、刷新网页或关闭浏览器时，会触发onunload事件。
如果我们
<script>标签把放到body上面，此时无法获取box的元素，因为此时的dom树还没加载好
<script>
// 获取页面中id为box的元素
var box = document.getElementById("box");
console.log(box); //null
</script>
<body>
<div id="box"></div>
</body>
解决办法使用onload事件
<script>
window.onload = function () {
// 获取页面中id为box的元素
var box = document.getElementById("box");
console.log(box); // <div id="box"></div>
};
</script>
<body>
<div id="box"></div>
</body>
网友评论