myVideo.addEventListener('ended', function() { myVideo.style.display = 'none'; hiddenBox.style.display = 'none'; }, false);

时间: 2024-04-01 19:37:05 浏览: 66

addEventListener()与removeEventListener()解析

5星 · 资源好评率100%

在JavaScript中，`addEventListener()`和`removeEventListener()`是两个至关重要的方法，用于在DOM元素上添加和移除事件监听器。这两个方法允许我们对用户交互或特定事件做出响应，如点击、鼠标移动等。 `addEventListener()`方法用于将一个事件处理程序（函数）绑定到指定的DOM元素。它的基本语法是： ```javascript element.addEventListener(type, listener, useCapture); ``` - `element`：要添加事件监听器的DOM元素。 - `type`：事件类型，不带"on"前缀，例如"click"、"mouseover"等。 - `listener`：事件发生时执行的函数，注意这里不加圆括号。 - `useCapture`：可选参数，表示事件是在捕获阶段还是冒泡阶段触发，默认为`false`，即在冒泡阶段触发。举个例子，我们可以在按钮上添加一个点击事件处理程序： ```javascript var btn = document.getElementById("myBtn"); btn.addEventListener("click", function () { alert(this.id); }, false); ``` `addEventListener()`的一个显著优点是它可以添加多个事件处理程序，这意味着同一种类型的事件可以有多个函数进行处理。例如： ```javascript btn.addEventListener("click", function () { alert(this.id); }, false); btn.addEventListener("click", function () { alert("Hello World"); }, false); ``` 当事件触发时，这些处理程序会按照添加的顺序依次执行。然而，使用`addEventListener()`添加的事件处理程序必须通过`removeEventListener()`来移除，移除时需要提供与添加时相同的参数。这一点需要注意，因为如果使用匿名函数作为事件处理程序，那么在尝试移除时就会遇到问题，因为匿名函数无法被引用： ```javascript btn.addEventListener("click", function () { alert(this.id); }, false); // 无效，因为无法直接移除匿名函数 btn.removeEventListener("click", function () { alert(this.id); }, false); ``` 为了解决这个问题，我们可以将事件处理程序定义为一个变量，这样在`removeEventListener()`时就可以引用它： ```javascript var handler = function () { alert(this.id); }; btn.addEventListener("click", handler, false); btn.removeEventListener("click", handler, false); // 有效！ ``` 在这个修复后的示例中，`handler`函数在`addEventListener()`和`removeEventListener()`中保持一致，因此能够正确地移除事件处理程序。总结来说，`addEventListener()`和`removeEventListener()`是JavaScript事件处理的核心，它们让我们能够灵活地响应用户交互。在使用时，要确保在`removeEventListener()`中传递的函数与`addEventListener()`中的一致，这样才能成功地移除事件监听器。同时，避免使用匿名函数作为事件处理程序，除非你确定不会需要移除它们。

这是一个监听视频播放结束事件的代码，当视频播放结束时，会将视频和一个名为hiddenBox的元素隐藏起来。其中，myVideo和hiddenBox是两个DOM元素的引用。addEventListener是一个DOM元素的方法，用于添加事件监听器。本段代码添加了一个'ended'事件监听器，表示监听视频播放结束事件，当事件触发时，执行回调函数，将myVideo和hiddenBox的display属性设置为'none'，即隐藏这两个元素。

阅读全文

myVideo.addEventListener('ended', function() { myVideo.style.display = 'none'; hiddenBox.style.display = 'none'; }, false);

相关推荐

attachEvent和addEventListener 使用方法

wordHTML5web视频中间插播广告.zip

videoSwitchgif.zip

videotaginHTML-源码.rar

practice.zip 音视频练习

网页播放视频音乐.zip

JS播放MP4例子.rar

实时获取视频当前帧封面图.rar

前端使用js+css开发视频播放器.rar

HTML5 video截取视频封面图片播放代码.zip

javascript:document.querySelector("video").dispatchEvent(new Event("ended"));，将此代码改进一下

1. 使用Canvas绘制(1)矩形、(2)三角形、(3)扇形、(4)文本、(5)图像、(6)视频。

1基于蓝牙的项目开发--蓝牙温度监测器.docx

AppDynamics：性能瓶颈识别与优化.docx

percona-xtrabackup-2.4.28-1.ky10.x86-64.rpm

2024年全球产品经理大会（脱敏）PPT合集（34份）.zip

基于物联网技术的停车场智能管理系统设计用户有单独APP

最新推荐

HTML5 通过Vedio标签实现视频循环播放的示例代码

Haskell编写的C-Minus编译器针对TM架构实现

管理建模和仿真的文件

【数据整理秘籍】：R语言与tidyr包的高效数据处理流程

在使用STEP7编程环境为S7-300 PLC进行编程时，如何正确分配I/O接口地址并利用SM信号模板进行编址？

水电模拟工具HydroElectric开发使用Matlab

"互动学习：行动中的多样性与论文攻读经历"

【数据分析必修课】：R语言中tidyr包的终极使用指南

在机器学习项目中，如何采用可解释性技术来提升文本分类模型的透明度，并确保模型解释性？

Vue与antd结合的后台管理系统分模块打包技术解析