js标准事件模型、事件注册的几种方法及其区别、事件委托机制

最新推荐文章于 2023-04-03 17:27:35 发布

偷只猫来养

最新推荐文章于 2023-04-03 17:27:35 发布

阅读量911

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/qq_42602282/article/details/107035476

版权

本文详细介绍了JavaScript中的事件处理，包括标准事件模型、事件注册的不同方法（传统方式与addEventListener）以及它们的区别。还深入讨论了事件委托机制，解释了如何通过事件冒泡来提高代码效率。内容涵盖了事件传播、阻止默认动作、常见事件类型以及事件处理函数中的this关键字用法。

摘要由CSDN通过智能技术生成

js标准事件模型、事件注册的几种方法及其区别、事件委托机制

一、事件注册

事件的三要素：事件源、事件、事件处理函数
注册事件就是为事件源注册一种类型的事件并注册对该事件的处理函数
事件响应：是一种异步响应行为，一般不会返回值，对大多数的事件，会根据设置的事件处理函数有默认的动作，当然也可以设置返回值进行逻辑运算等
事件处理函数：一般不会传参，在标准浏览器中，事件处理函数会默认传递一个event实参，它是一个Event对象，当事件发生时，事件消息就会通过Event对象来进行传播

1、传统方式注册事件监听

在标签中添加事件监听属性，值为反应函数

<button onclick = 'change()'></button>
<script>
    function change(){
   
        alert('静态添加事件监听');
    }
</script>

在js中获取元素后动态添加事件处理

<button></button>
<script>
    let btn = document.querySelector('button');
    btn.onclick = function(){
   
        alert('动态添加事件监听1');
    }
    btn.onclick = function(){
   
        alert('动态添加事件监听2');
    }
</script>

注意：

事件具有唯一性，仅可以注册一次，若注册了多次，会以最后一次注册的事件为准。
传统的方式注册的事件使用：目标元素.事件 = null 来注销事件。

2、新的方法

addEventListener(eventType,function,useCapture)：

eventType：事件类型，不同于传统事件类型，eventType要加引号并且不能在事件前加’on’;
function：事件响应函数，可以写成内部函数也可以写成外部函数；
useCapture：为Boolean类型，为true时在捕获阶段进行监听，为false时在冒泡阶段进行监听；当没有填写这一参数时，默认为false即冒泡
removeEventListener(eventType,function,useCapture)：撤销事件，但是仅能撤销addEventListener注册的事件监听；eventType和function都要和注册时相同；

        <button></button>
		<script type="text/javascript">
			let btn = document.querySelector('button');
			function change(){
   
				alert(点击按钮);
			}
			btn.addEventListener('click',change,false);
			btn.removeEventListener('click',change,false);
		</script>

对于IE6-8要使用attachEvent()和detachEvent()来添加监听事件以及移除监听事件。

3、区别

传统方法定义的事件具有唯一性，仅可以为一个元素定义一种事件
使用事件监听的方式可以为一个元素定义多个事件，事件的执行顺序不是由定义的顺序执行
事件监听的方式更加灵活便于使用

二、标准事件模型

事件处理函数中的this：在简单事件模型中，this代表当前事件对象，与Event对象的srcEvent(IE)或者target(标准对象模型)所代表的意思相同。

1、标准事件模型（IE8后）

js标准事件模型适用于IE8以后版本的浏览器，它分为三个部分：

事件传播
注册事件
注销事件

关于标准事件模型的事件传播：

捕获阶段：事件从Document对象沿着文档树向下传播到目标节点，如果目标节点的任何一个上级节点注册了相同的事件处理函数，那么事件在传播过程中就会首先在最靠近顶部的上级节点执行，并依次向下传播：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
   
				width: 200px;
				height: 200px;
				background-color: red;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.son{
   
				width: 100px;
				height