window.addEventListener 用法

news/2024/9/25 15:22:16/

window.addEventListener 是JavaScript中用来为DOM元素(在本例中是浏览器窗口window)添加事件监听器的方法。这对于响应用户操作(如点击、滚动等)或页面/浏览器的特定状态变化非常有用。下面是如何使用window.addEventListener的基本语法和一个示例:

基本语法

javascript">window.addEventListener(eventType, listener, options);
  • eventType (字符串): 要监听的事件类型,例如 'click', 'scroll', 'load' 等。
  • listener (函数): 当事件发生时调用的函数。这个函数接收一个事件对象作为参数,你可以通过这个对象访问到与事件相关的信息。
  • options (可选对象): 用于指定事件监听器的行为,比如是否使用捕获阶段,默认为false(冒泡阶段)。可以设置{capture: true}来启用捕获阶段,或者{once: true}让监听器只触发一次后自动移除等。

示例

假设我们想在页面加载完成后显示一条消息,可以这样使用window.addEventListener

javascript">window.addEventListener('load', function() {console.log('页面加载完成了!');
});

如果希望在用户点击页面任何位置时执行某些操作,并且只希望该监听器生效一次,可以这样写:

javascript">window.addEventListener('click', function(event) {console.log('用户点击了页面!');// 执行一些操作...// 确保这个监听器只运行一次并移除自己window.removeEventListener('click', arguments.callee, false);
}, {once: true});

注意事项

  • 确保你在调用removeEventListener时传入了相同的函数引用(或使用arguments.callee在严格模式下不可用),以便正确地移除事件监听器。
  • 使用addEventListener相比于直接赋值给事件属性(如element.onclick = function() {})更灵活,因为它允许为同一事件类型添加多个监听器。
  • 了解事件流(捕获阶段、目标阶段、冒泡阶段)有助于更有效地使用addEventListener,特别是当你需要控制事件处理的顺序时。

http://www.ppmy.cn/news/1464476.html

相关文章

23种设计模式之一— — — —装饰模式详细介绍与讲解

装饰模式详细讲解 一、定义二、装饰模式结构核心思想模式角色模式的UML类图应用场景模式优点模式缺点 实例演示图示代码演示运行结果 一、定义 装饰模式(别名:包装器) 装饰模式(Decorator Pattern)是结构型的设计模式…

day22二叉树part08 | 235. 二叉搜索树的最近公共祖先 701.二叉搜索树中的插入操作 450.删除二叉搜索树中的节点

**235. 二叉搜索树的最近公共祖先 ** 这里利用上了二叉搜索树的特性&#xff0c;从上到下遍历&#xff0c;最近的公共祖先一定是满足p->val < root->val < q->val的 class Solution { public:TreeNode* lowestCommonAncestor(TreeNode* root, TreeNode* p, Tr…

设计模式在芯片验证中的应用——单例

一、单例模式 单例模式(Singleton)是一种创建型设计模式&#xff0c;能够保证一个类只有一个实例&#xff0c; 并提供一个访问该实例的全局节点。验证环境配置(configuration)类、超时(timeout)处理类等可以使用单例实现。比如说验证环境需要在特定场景中监测特定接口上的超时事…

NSSCTF-Web题目4

[SWPUCTF 2021 新生赛]hardrce 1、题目 2、知识点 rce&#xff1a;远程代码执行、url取反编码 3、解题思路 打开题目 出现一段代码&#xff0c;审计源代码 题目需要我们通过get方式输入变量wllm的值 但是变量的值被过滤了&#xff0c;不能输入字母和\t、\n等值 所以我们需…

视频汇聚EasyCVR平台视图库GA/T 1400协议与GB/T 28181协议的区别

在公安和公共安全领域&#xff0c;视频图像信息的应用日益广泛&#xff0c;尤其是在监控、安防和应急指挥等方面。为了实现视频信息的有效传输、接收和处理&#xff0c;GA/T 1400和GB/T 28181这两个协议被广泛应用。虽然两者都服务于视频信息处理的目的&#xff0c;但它们在实际…

【Paddle】Inplace相关问题:反向传播、影响内存使用和性能

【Paddle】Inplace相关问题&#xff1a;反向传播、影响内存使用和性能 写在最前面inplace 的好处有哪些&#xff1f;能降低计算复杂度吗在反向传播时&#xff0c;Inplace为什么会阻碍呢&#xff1f;“计算图的完整性受损”表达有误原地操作 sin_()为什么原地操作会阻碍反向传播…

新人学习笔记之(数据)

一、数据类型简介 1.为什么需要数据类型 &#xff08;1&#xff09;在计算机中&#xff0c;不同的数据所需占用的储存空间数不同的&#xff0c;为了便于把数据分成所需内存大小不同的数据&#xff0c;充分利用储存空间&#xff0c;于是定义了不同的数据类型。 &#xff08;2&am…

基于xilinx FPGA的 FFT IP使用例程说明文档(可动态配置FFT点数,可计算信号频率与幅度)

目录 1 概述2 IP examples功能3 IP 使用例程3.1 IP设置3.2 fft_demo端口3.3 例程框图3.4 仿真结果3.5 仿真验证得出的结论4 注意事项5例程位置 1 概述 本文用于讲解xilinx IP 的FFT ip examples的功能说明&#xff0c;方便使用者快速上手。 参考文档&#xff1a;《PG109》 2 …