JS中事件的绑定和解绑

最新推荐文章于 2024-09-11 11:04:37 发布

原创最新推荐文章于 2024-09-11 11:04:37 发布 · 2.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

JavaScript 同时被 2 个专栏收录

20 篇文章

订阅专栏

ES6

7 篇文章

订阅专栏

本文详细介绍了JavaScript中的事件绑定和解绑，包括DOM0级和DOM2级事件的处理。讲解了事件的三要素：事件源、事件类型和事件处理函数，并通过实例展示了如何使用addEventListener和attachEvent进行事件绑定及解除。此外，还强调了解绑事件时需要确保事件处理函数为具名函数，以便于通过函数名进行解除。

一、了解事件

事件包括原生事件和自定义事件

1. 事件的三要素

事件源：在谁身上绑定事件
事件类型：什么事件
（JS中常见的事件类型）
事件处理函数：当行为发生的时候，执行哪一个函数

2. 事件绑定分类

2-1. dem0级事件

on… 的形式

2-2. dom2级事件

事件监听

二、事件的绑定

1. dom0级事件

语法： 事件源.on事件类型 = 事件处理函数

2. dom2级事件（事件监听器）

addEventListener()
标准浏览器使用
语法： 事件源.addEventListener(‘事件类型’, 事件处理函数)
至少两个参数
第三个参数：
       默认是 false 表示冒泡（按照从目标到 window 的顺序来执行所有的事件）
       可以选填为 true 表示捕获（按照 从 window 到目标 的顺序来执行所有的事件）
可以同时给同一个事件类型绑定多个事件处理函数
       绑定多个事件处理函数的时候，顺序绑定顺序执行
attachEvent()
IE低版本使用
语法： 事件源.attchEvent(‘on事件类型’，事件处理函数)
只有两个参数
可以同时给一个事件类型绑定多个事件处理函数
绑定多个事件处理函数的时候，顺序绑定倒叙执行

三、事件的解绑

1. 解绑 dom0 级事件

因为在给 dom0级事件绑定的时候是赋值的形式，所以直接再次给它赋值为 null ，所以就把之前的事件处理函数干掉了

2. 解绑 dom2 级事件

removeEventListener()
语法： removeEventListener(‘事件类型’, 要解绑的事件处理函数)
注意： 如果你想解绑事件，那么在你绑定事件的时候，一定要把 函数单独书写
写成一个 具名函数 的形式，以函数名的形式绑定事件处理函数
detachEvent()
语法： detachEvent(‘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>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.box {
			width: 100px;
			height: 100px;
			/*IE低版本这个属性用不了*/
			/* background-image: linear-gradient(to right, orange, red); */
			
			/*IE低版本*/
			background-color: blue;
		}

		.btn {
			width: 100px;
			height: 40px;
			font-size: 20px;
		}
	</style>
</head>

<body>
	<div class="box" id="box"></div>
	<button class="btn" id="btn">解绑事件</button>

	<script>
		//获取元素
		 var box = document.querySelector('.box')
		 var btn = document.querySelector('.btn')	

		// 1. dom0级 事件
			//绑定
			box.onclick = function () {
				box.style.left = 50 + 'px'
			} 
			//解绑
			box.onclick = null

		// 2. dom2级 事件
		//标准浏览器
			// 提前准备号事件处理函数
			function fn() {
				console.log('绑定事件')
			}
			//绑定
			box.addEventListener('click', fn)
			//解绑
			btn.onclick = function () {
				box.removeEventListener('click', fn)
				console.log('我执行了')
			} 
		//IE低版本
			var box = document.getElementById('box')
			var btn = document.getElementById('btn')
			//绑定
			box.attachEvent('onclick', fn)
			//解绑
			btn.onclick = function () {
				box.detachEvent('onclick', fn)
				console.log('我执行了')
			}
	</script>

</body>

</html>