在上面的案例中我们使用到了一个简单的事件绑定，如果是零基础的同学们可能到目前为止并不知道何为事件，何为事件绑定。
事件：它的含义是，当...的时候发生了...事，我们把这一类过程统称为事件。
例如：当点击按钮时做了隐藏或显示图片这件事。
我们把点击click称为事件类型，把做的这件事叫做事件方法或事件函数。
事件类型有非常多，比如左键单击onclick、右键单击oncontextmenu、双击ondblclick、鼠标按下onmousedown、鼠标弹起onmouseup、鼠标移动onmousemove等等之类。
事件方法一般是我们自定义的一个函数，通过这个函数实现某种功能。
下面我们先列出一些常用的事件类型，如下：
| 事件名 | 解释 | | onchange | 元素的内容改变且失去焦点时触发 | | onclick | 用户点击 HTML 元素是触发 | | onmouseover | 鼠标指针移动到当前元素上时发生 | | onmouseout | 鼠标指针离开当前元素上时发生 | | onkeydown | 用户在当前元素上按下键盘按键时触发 | | onload | 页面加载完成后触发 | | mouseente | 当鼠标移入时触发，与onmouseover的区别是：mouseente鼠标从父元素移入到子元素上时不触发 | | mouseleave | 当鼠标移出时触发，与onmouseout的区别是：mouseleave鼠标从子元素移出到父元素上时不触发 | | onmousedown | 当鼠标按下时触发 | | onmouseup | 当鼠标弹起时触发 | | onmousemove | 当鼠标移动时触发 | | oncopy | 当赋值内容时触发 | | onkeypress | 当键盘按键按下时触发 | | onkeyup | 当键盘按键弹起时触发 | | onsubmit | 当表单提交时触发 | | onreset | 当表单重置时触发 | | oninput | 当内容改变时触发 |
通过以上的讲解，大家应该可以理解了事件的基本原理，下面我们就讲解一下如何给一个元素绑定事件。
事件的绑定有以下三种方式：
方法一：行内绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内绑定事件</title>
</head>
<body>
<input type="button" name="" value="按钮">
<script>
function f(){
console.log(456);
}
</script>
</body>
</html>
以上我们给input标签绑定一个点击事件，绑定的事件方法为f函数，即：当用户点击按钮时触发f函数。f函数的功能是输出456。
方法二：在js中通过标签的事件属性绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js中通过标签的事件属性绑定</title>
</head>
<body>
<input type="button" name="" value="按钮" id="btn">
<script>
document.getElementById('btn').onclick = function(){
console.log('这个是js中通过标签的事件属性绑定的事件');
}
</script>
</body>
</html>
以上，我们先获取到了id为btn的按钮，然后.onclick=事件函数，同样可以给该按钮绑定事件。
方法三：事件监听方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js中通过标签的事件属性绑定</title>
</head>
<body>
<input type="button" name="" value="按钮" id="btn">
<script>
document.getElementById('btn').addEventListener('click', function(){
console.log('这是通过事件监听方式绑定的事件');
});
</script>
</body>
</html>
以上我们同样是先获取到要绑定事件的元素，然后使用addEventListener事件监听函数，给监听函数传入事件名称和事件函数，同样可以实现事件的绑定。
注意：这里的事件类型不加on。
那么，为什么同样是事件绑定，为什么需要这三种不同的方法呢？它们之间到底有何区别？
一、行内绑定事件的特性
通过行内绑定的方式绑定的事件，如果在同一个标签上多次绑定同一个事件，始终执行第一次绑定的事件。
举例说明：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内绑定事件的特性</title>
</head>
<body>
<input type="button" name="" value="按钮">
<script>
function f(){
console.log(456);
}
function f1(){
console.log(654);
}
</script>
</body>
</html>
以上我们给input标签绑定了两个onclick事件，它们的事件函数分别是f和f1，当我们点击按钮时，它只会触发f这个事件。
二、在js中通过标签的事件属性绑定事件的特性
如果同一个标签同一个事件，绑定了多次，始终执行最后一次绑定的事件
举例说明：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在js中通过标签的事件属性绑定事件的特性</title>
</head>
<body>
<input type="button" name="" value="按钮" id="btn">
<script>
document.getElementById('btn').onclick = function(){
console.log('在js中通过标签的事件属性111');
}
document.getElementById('btn').onclick = function(){
console.log('在js中通过标签的事件属性222');
}
</script>
</body>
</html>
三、事件监听方式绑定事件的特性
如果同一个标签同一个事件，绑定了多次，都会执行（按照绑定的先后顺序执行）
举例说明：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件监听方式绑定事件的特性</title>
</head>
<body>
<input type="button" name="" value="按钮" id="btn">
<script>
document.getElementById('btn').addEventListener('click', function(){
console.log('事件监听方式绑定事件的特性111');
});
document.getElementById('btn').addEventListener('click', function(){
console.log('事件监听方式绑定事件的特性222');
});
</script>
</body>
</html>
ok，以上就是对JS中三种事件绑定方式及区别的讲解，大家动手练习一下，请务必学会后再继续下面的学习。
|
窥视卡
雷达卡
发表于 2023-1-24 19:17:47
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-16 12:00:23
