浏览器工作原理（四）：浏览器事件解读

2024-05-15 12:33:47

参考：https://zhuanlan.zhihu.com/p/23059366

一、事件的监听

事件监听的三种方式：

1、html内联属性：<button οnclick="btnClick"></button>

2、DOM属性绑定：document.getElementById("btn").onclick = function () {}

3、事件监听函数：document.getElementById("btn").addEventListener("click", ()=>{}, false)

function addEventHandler(obj, eventName, handler) {if (document.addEventListener) {obj.addEventListener(eventName, handler, false);}else if (document.attachEvent) {obj.attachEvent("on" + eventName, handler);}    else {obj["on" + eventName] = handler;}
}

二、事件移除

1、document.getElementById("btn").removeEventListener("click", ()=>{}, false)

2、document.getElementById("btn").detachEvent("onclick")

3、document.getElementById("btn").onclick = null

function removeEventHandler(obj, eventName, handler) {if (document.removeEventListener) {obj.removeEventListener(eventName, handler, false);}else if (document.detachEvent) {obj.detachEvent("on" + eventName, handler);}else {obj["on" + eventName] = null;}
}

三、事件触发过程

事件触发过程分三个阶段：捕获阶段、目标阶段、冒泡阶段

1、捕获阶段：用户对 DOM 元素进行操作，从 Window 依次经过 docuemnt、html、body等，到达目标元素父节点的过程称为捕获阶段，注意此时还未到达目标节点。

2、目标阶段：捕获阶段结束，事件到达目标元素并触发事件的过程是目标阶段

3、冒泡阶段：目标元素触发事件结束后，向父元素逐级返回的过程

四、事件委托

事件委托是指，某元素的事件自己不处理，而是借助事件冒泡原理交由目标元素的父级或祖级元素处理的机制。例如，li列表事件可以绑定到ul，radio列表事件可以绑定在父级元素

1、为什么要事件委托

减少时间绑定，提升性能（事件绑定会占用内存）

动态监听，避免增加或删除元素导致的事件绑定

2、流程

事件到达目标元素后，冒泡返回，被已绑定事件的父级或祖级元素响应执行。其中，事件对象中的 target 属性记录实际触发本次事件的元素

五、阻止事件冒泡

在不希望事件冒泡的时候可以阻止该机制

function preventBubble(e) {if (!e) {const e = window.event;}e.cancelBubble = true;if (e.stopPropagation) {e.stopPropagation();}
}

转载于:https://www.cnblogs.com/zs-note/p/9633131.html

浏览器工作原理（四）：浏览器事件解读相关推荐

javascript---001-运行原理01_前端三大技术_JS重要性_Atwood定律_JS应用_JS让人迷惑_TypeScript会取代JS吗_JS是一门编程语言_浏览器工作原理_浏览器内核
javascript-001-运行原理01 1.前端三大技术 HTML CSS Javascript 2.Javascript的重要性 (1)javascript是很多框架的基础,Vue,React, ...
前端获取本机ip_前端开发者必须明白的浏览器工作原理
前言作为前端开发,我们平常跟浏览器打交道的时间也是最多的.在前端面试中,一个较为经典的问题:在浏览器地址中输入url地址,敲回车,发生了什么?浏览器究竟做了什么?相信很多人脑海里都会出现个大概的轮廓 ...
＜＜浏览器工作原理与实践＞＞读书笔记
1. 进程和线程的区别概念: 进程:操作系统进行资源分配和调度的基本单位:程序的运行实例:(在我们启动一个程序的时候,操作系统会为该程序创建一块内存空间,用来存放代码,运行数据,和执行任务的主线程, ...
《浏览器工作原理与实践》学习笔记
浏览器原理前言本文是学习李兵老师的<浏览器工作原理与实践>过程中记录笔记,详细链接见文末进程vs线程进程:一个应用程序的运行实例就是一个进程,详细来说就是:启动一个应用程序的时候, ...
攻城狮应该明白的浏览器工作原理～
点击上方"IT平头哥联盟",选择"置顶或者星标" 一起进步- 作者:banggan 前言作为前端开发,我们平常跟浏览器打交道的时间也是最多的.在前端面试中,一 ...
浏览器工作原理探究详解
浏览器工作原理探究标签: 浏览器工作原理 / web性能优化引言最近对web的性能优化比较感兴趣,而前端代码主要在浏览器工作的.如果对浏览器的工作原理了解清楚,可以为web性能优化提供方向以及理 ...
前端开发者应该明白的浏览器工作原理
原文地址:banggan.github.io/2019/02/20/- 前言作为前端开发,我们平常跟浏览器打交道的时间也是最多的.在前端面试中,一个较为经典的问题:在浏览器地址中输入url地址,敲回 ...
html5前端开发原理,web前端开发应该明白的浏览器工作原理
作为前端开发,我们平常跟浏览器打交道的时间也是最多的.在前端面试中,一个较为经典的问题:在浏览器地址中输入url地址,敲回车,发生了什么?浏览器究竟做了什么?相信很多人脑海里都会出现个大概的轮廓,可是 ...
【综合篇】浏览器的工作原理：浏览器幕后揭秘
web(给达达前端加星标,提升前端技能) 了解浏览器是如何工作的,能够让你站在更高的角度去理解前端浏览器的发展历程的三大路线,第一是应用程序web化,第二是web应用移动化,第三是web操作系统化. ...
《深入理解Android》一2.1　浏览器工作原理概述
本节书摘来自华章出版社<深入理解Android>一书中的第2章,第2.1节,作者孟德国王耀龙周金利黎欢,更多章节内容可以访问云栖社区"华章计算机"公众号查看 2. ...

最新文章

热门文章