了解 Dean Edwards 的 addevent JavaScript

2023-12-06

我需要帮助理解这段代码。重点是什么handler.guid?为什么需要哈希表?

重点是什么:

if ( element["on" + type])
  {
  handlers[0] = element["on" + type];
  }

文中的“这个”指的是什么handleEvent、元素还是addEvent函数?

function addEvent(element, type, handler) 
  {
  // assign each event handler a unique ID
  if (!handler.$$guid) handler.$$guid = addEvent.guid++;

  // create a hash table of event types for the element
  if (!element.events) element.events = {};

  // create a hash table of event handlers for each element/event pair
  var handlers = element.events[type];

  if (!handlers) 
    {
    handlers = element.events[type] = {};
    // store the existing event handler (if there is one)
    if (element["on" + type]) 
      {
      handlers[0] = element["on" + type];
      }
    }

  // store the event handler in the hash table
  handlers[handler.$$guid] = handler;

  // assign a global event handler to do all the work
  element["on" + type] = handleEvent;
  }

// a counter used to create unique IDs
addEvent.guid = 1;


function removeEvent(element, type, handler) 
  {
  // delete the event handler from the hash table
  if (element.events && element.events[type]) 
    {
    delete element.events[type][handler.$$guid];
    }
  }


function handleEvent(event) 
  {
  // grab the event object (IE uses a global event object)
  event = event || window.event;

  // get a reference to the hash table of event handlers
  var handlers = this.events[event.type];

  // execute each event handler
  for (var i in handlers) 
    {
    this.$$handleEvent = handlers[i];
    this.$$handleEvent(event);
    }
  }

The guid用于给每个事件一个唯一的索引,而哈希表则用于实现动态调度表. this.$$handleEvent引用处理程序映射表中的元素。

回调系统的工作原理是将事件处理程序存储在数组中。当检测到底层事件时,调度系统循环遍历数组,依次调用回调函数。

The jQuery 事件对象使用类似的结构。

参考

  • 关于 GUID 的几句话
  • 我什么时候应该使用调度表
  • 使用 Ruby Forwardable 委托所有事情 - 文字和代码
  • 四人帮错了,你不理解授权 — Saturn Flyer
  • GUID 和 UUID
  • RFC 4122:通用唯一标识符 (UUID) URN 命名空间
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

了解 Dean Edwards 的 addevent JavaScript 的相关文章

  • 在 Node.js 中一次迭代 50 个项目的数组

    我是 node js 的新手 目前正在尝试编写数组迭代代码 我有一个包含 1 000 个项目的数组 由于服务器负载问题 我想一次迭代 50 个项目的块 我目前使用 forEach 循环 如下所示 我希望将其转换为上述块迭代 result i
  • 从 json 数组中获取成对的值

    首先 这是我从 php 源获取的 json 值 oid 2 cid 107 oid 4 cid 98 oid 4 cid 99 之后 我想要得到并且oid值以及相应的cid值例如 oid 2 and cid 107一口气 oid 4 and
  • JavaScript Array.length 属性是函数还是简单变量?

    我有以下 JavaScript 代码 我已经使用 new 关键字初始化了一个数组 因此创建了该数组对象的一个 新实例 然后 我通过向数组添加元素来填充该数组 然而我认为我犯了一个根本性的误解 代码的下一部分让我非常困惑 如果它不够清楚或者完
  • 谷歌脚本循环性能

    我是 google 脚本的新手 我不确定为什么与 Excel VBA 的简单循环相比 我的性能如此差 我附上了下面的代码 它是一个大约 1200 行的循环 每秒删除大约 2 3 行 我写的脚本效率很低吗 我还不熟悉 Javascript 但
  • iOS Javascript DOM“冻结?”

    这里有几个问题 有没有办法阻止 iOS 在滚动时冻结页面上的 javascript 当您在另一个选项卡中或切换应用程序时 iOS 是否会冻结 JavaScript iOS 上还有其他主要的 javascript 限制吗 iOS 6 x 会暂
  • Firebase HTTP Cloud Functions - 读取数据库一次

    我有 Firebase HTTPs 功能 该函数需要根据查询参数从 Firebase 数据库读取值 并根据该数据返回结果 Firebase JS SDK 表示要使用以下命令来执行此操作 return firebase database re
  • 代理递归函数

    想象一个简单的递归函数 我们试图包装它以检测输入和输出 A simple recursive function const count n gt n 1 count n 1 Wrap a function in a proxy to ins
  • 在 Angular JS 中撤消重做

    我有一个大对象排列在 rootScope 中 比如说 gt 100 个对象 每个对象又具有对象 数组的层次结构 我想使用 deepWatching watch 整个 rootScope 即将 watch 的第三个参数设置为 TRUE 但这里
  • Google App Script postMessage 与收件人窗口的来源不匹配

    我有一个 Google App 脚本部署为Web应用程序 https developers google com apps script guides web 它工作正常 直到今天晚上我发现它无法在 Firefox 或 Chrome 中加载
  • React 功能组件:作为函数调用与作为组件调用

    假设我有一个功能组件 const Foo props gt div props name div 直接作为函数调用有什么区别 const fooParent gt div Foo name foo div 与将其称为组件相比 const f
  • 使用 ECMA 脚本向节点(页面)添加新属性

    我需要在页面激活时向页面添加属性 我决定建立一个工作流程 在激活步骤之前执行相同的操作 我的自定义工作流程步骤 激活步骤之前的步骤 使用 ECMA 脚本来实现此目的 这是我到目前为止所拥有的 var workflowData granite
  • 我可以阻止history.popstate在初始页面加载时触发吗?

    我正在开发一个通过 AJAX 提供内容的网站 如果您单击菜单中的某个项目 内容 div 会更新为 get回应 没什么花哨的 我正在实施history pushState允许使用浏览器的后退 前进按钮进行导航 我有以下内容可以在历史导航上加载
  • Jasmine 单元测试不等待承诺解析

    我有一个有角度的服务 它具有像这样的异步依赖项 function angular module app factory myService q asyncService function q asyncService var myData
  • JavaScript 检查时区名称是否有效

    有没有一种方法可以在不使用外部库的情况下检查 JavaScript 中的时区名称是否有效 当用户在文本字段中输入时区名称时 我想验证时区是否有效 我知道我们可以使用时刻时区库轻松做到这一点 但我不想使用任何额外的库 我正在寻找纯 JavaS
  • 扩展html表格突出显示行和列并使当前单元格具有不同的颜色

    我找到了用鼠标悬停时突出显示行和列的示例 https stackoverflow com a 28312853 139698 https stackoverflow com a 28312853 139698 如何使鼠标悬停的一个单元格变为
  • 在Vue.js 3中添加全局变量

    如何在 Vue js 3 中添加全局变量 在 Vue js 2 中 我们在main js file Vue prototype myGlobalVariable globalVariable 最直接的替换就是app config globa
  • 角度距离计算

    我正在使用角度制作距离计算应用程序 Html
  • 跨浏览器相当于explicitOriginalTarget事件参数

    有谁知道跨浏览器等价于explicitOriginalTarget事件参数 该参数是 Mozilla 特定的 它为我提供了导致模糊的元素 假设我的页面上有一个文本输入和一个链接 文本输入具有焦点 如果我点击链接 文本输入的模糊事件会通过ex
  • React 嵌入脚本标签不可样式化

    我打算将 SurveyMonkey 调查嵌入到我的网站中 用 React 制作 只是让它工作起来很麻烦 但最终这段代码工作了 let script let extractScript
  • JavaScript 开关(真)

    你好 我正在尝试处理 ajax json 响应 这是我的代码 success function j switch true case j choice1 alert choice2 break case j choice2 alert ch

随机推荐

  • 数据表:按数字数据顺序排序不起作用?

    我正在使用 DataTables 版本 1 10 当列中显示的值不是数字时 我想让列可按数值排序 我理解了我需要做的是添加一个data sort属性到每个表格单元格 我尝试将其添加到createdRow方法 但是虽然我可以在 HTML 中看
  • 为什么我的 Java 输出字符串以 % 字符结尾?

    我在 Linux 上使用的 Java 版本是 openjdk版本 16 0 2 2021 07 20 OpenJDK 运行时环境 版本 16 0 2 7 OpenJDK 64 位服务器虚拟机 版本 16 0 2 7 混合模式 这是我从 He
  • 解释 Mike Bostock 节点解析循环 [重复]

    这个问题在这里已经有答案了 我对 JavaScript 和 d3 比较陌生 但我对强制导向布局非常感兴趣 在 Mike Bostock 的力导向可视化中 他倾向于使用以下代码 或类似代码 从链接列表中解析节点 var links sourc
  • rlang:在 NSE 函数中使用冒号快捷方式从...获取名称

    我正在编写一个用于制作人口统计数据表的函数包 我有一个函数 缩写如下 我需要在其中获取几列 我会gather一个数据框 诀窍是我想保持这些列的名称按顺序排列 因为我需要在收集后按该顺序放置一列 在这种情况下 这些列是estimate moe
  • 我应该如何从 Scala 列表中删除第一次出现的对象?

    从 Scala 列表中删除第一次出现的对象的最佳方法是什么 来自 Java 我习惯了List remove Object o 方法从列表中删除第一次出现的元素 现在我在 Scala 中工作 我希望该方法返回一个新的不可变的List而不是改变
  • 如何通过套接字InputStream发送XML数据

    我正在尝试使用基于 XML 的协议用 Java 编写客户端 服务器应用程序 但我有一个很大的问题 看这部分客户端代码 InputStream incoming skt getInputStream I get Stream from Soc
  • XCode 4 控制台不会接受用户输入

    在 XCode 4 中 当我运行这样的代码时 string input cout lt lt Enter command lt lt endl getline cin input cout lt lt You entered lt lt i
  • 具有前向声明错误的循环依赖

    在 A hpp 文件中 我有一个结构 其中有一个 B 类的指针 struct state B b 在 A hpp 文件中 我添加了前向声明 并将 B hpp 文件包含在 A cpp 文件中 A hpp class B 在 B hpp 文件中
  • 无法使用 IdHttp 解码响应内容

    我使用 TIdHttp 来获取网页内容 响应头指示内容编码为utf8 我想在控制台中打印内容为CP936 简体中文 但实际内容不可读 Result TEncoding Utf8 GetString ResponseBuffer 我在 pyt
  • 我如何知道空指针异常源自何处?

    我在制作黑莓应用程序时遇到问题 我发现有人制作了一个教程 它做了我尝试过的事情 我复制了教程应用程序的代码来尝试重新创建它 只是为了看看它的实际效果 结果 空指针异常 我想知道是什么触发了这个 我怎么能够 如果您捕获 Throwable 而
  • 如何在 Google Apps 脚本下的 Browser.msgBox 中将文本加粗

    我将以下 Google 脚本链接到一个工作表 function onOpen var text aux texto bold Browser msgBox AVISOS n n1 Prazo impreter vel text aux pa
  • JSP 如何缩放图像?

    有没有办法缩放图像然后在jsp页面中显示 当检索和显示图像时 我想以相同的尺寸显示所有照片 有什么API可以做到吗 我从谷歌搜索过 我发现那些是关于使用 Takeit 缩放图像的 但不能在网络应用程序中工作 您可以使用内置的Java 2D
  • 链接GLEW和其他,_glViewport是唯一未解决的

    我正在使用 G 将我的项目链接到 glew32 glfw opengl32 glu32 等 一切都编译得很好 但是在链接阶段 除了 glViewport 之外的所有内容都链接 我收到此错误 对 glViewport 的未定义引用 我觉得这
  • 如何在流数据集中加载 tar.gz 文件?

    我想从 tar gzip 文件 tgz 进行流式处理 其中包括我实际的 CSV 存储数据 当我的数据以 CSV 文件形式出现时 我已经成功地使用 Spark 2 2 进行结构化流处理 但实际上 数据以 gzipped csv 文件形式出现
  • MySQL GROUP BY 优先

    是否可以使用 GROUP BY 并优先选择记录 例如 我有一大堆联系人数据 可能包含也可能不包含所有信息 在 CSV 意义上 如果可能如下所示 Test User Address1 Address2 email protected emai
  • QML 虚拟键盘隐藏按钮不起作用

    如果我点击键盘 我会遇到问题hide按钮 以下是代码 import QtQuick 2 6 import QtQuick Window 2 2 import QtQuick Controls 2 2 import QtQuick Virtu
  • jQuery 限制显示的元素数量,例如 5

    我可以这么说 ol li Content1 li li Content2 li li Content3 li li Content4 li li Content5 li li Content6 li li Content7 li li Co
  • Matlab 用随机元素生成矩阵

    如何生成一个带有布尔元素的矩阵 但每行的总和等于某个常数 每一行都有相同的数字吗 k 5 m 10 n 10 I sort rand m n 2 M I lt k 如果您不想要相同数量的1每行都有一个 s 而是有一个向量指定每行有多少个1如
  • 麻木。将一个数组中的所有向量行与同一数组中的所有其他向量行进行比较

    我有一个 numpy 数组 如下所示 a array 2 3 0 2 并希望使用 np greater 将每行中的 向量 与其他行进行比较 因此 array False False lt 2 3 compared with 2 3 True
  • 了解 Dean Edwards 的 addevent JavaScript

    我需要帮助理解这段代码 重点是什么handler guid 为什么需要哈希表 重点是什么 if element on type handlers 0 element on type 文中的 这个 指的是什么handleEvent 元素还是a