js 3个事件监听器 EventListeners

起因, 目的:

我有2个显示器。 某视频网站,我想一边播放视频,一边搞其他。但是,当我把鼠标移动到浏览器外面,点击一下别处, 视频就会自动暂停. 这个叫做 事件监听

  • blur, 在元素或窗口失去焦点时触发
  • focus, 与 blur 相反。
  • visibilitychange

1. 自己先写个播放视频的例子。

html + css + js , 一个文件
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Player Example</title>
    <style>
        
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            text-align: center;
            padding: 10px;
        }

        video {
            width: 100%;
            max-width: 1800px;
            height: auto;
            margin-bottom: 3px;
        }

        p {
            color: #555;
        }
    </style>
</head>

<body>
    <h1>Video Player: a.mp4</h1>
    <video id="myVideo" controls>
        <source src="a.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

    <p id="status">The video is playing...</p>

    <script>
        const video = document.getElementById('myVideo');
        const status = document.getElementById('status');

        // 当窗口失去焦点时暂停视频
        window.addEventListener('blur', () => {
            video.pause();
            status.textContent = 'The video is paused because the window lost focus.';
        });

        // 当窗口重新获得焦点时恢复播放
        window.addEventListener('focus', () => {
            video.play();
            status.textContent = 'The video is playing...';
        });

        // 当页面变为不可见时暂停视频
        document.addEventListener('visibilitychange', () => {
            if (document.hidden) {
                video.pause();
                status.textContent = 'The video is paused because the page is not visible.';
            } else {
                video.play();
                status.textContent = 'The video is playing...';
            }
        });
    </script>

</body>
</html>

播放效果:

2. 浏览器中,执行下面这段 js 代码,会移除这3个事件监听函数。
js 复制代码
// 获取窗口的 blur 和 focus 事件监听器
const blurListeners = getEventListeners(window).blur;
const focusListeners = getEventListeners(window).focus;

// 获取文档的 visibilitychange 事件监听器
const visibilityListeners = getEventListeners(document).visibilitychange;

// 移除 blur 事件监听器
blurListeners.forEach(listener => {
    window.removeEventListener('blur', listener.listener);
});

// 移除 focus 事件监听器
focusListeners.forEach(listener => {
    window.removeEventListener('focus', listener.listener);
});

// 移除 visibilitychange 事件监听器
visibilityListeners.forEach(listener => {
    document.removeEventListener('visibilitychange', listener.listener);
});

console.log('All specified event listeners removed.');

然后视频就能正常播放了。

3. 但是,如果把上面的js 代码,改写到 chrome 插件中,则无法运行。因为:

getEventListeners:这是 Chrome DevTools 中的一个特殊方法,用于查看某个元素上绑定的事件监听器。注意,它在普通 JavaScript 环境中是不可用的,只能在 DevTools 中使用。

4. Todo
  • 继续研究 EventListener.
  • 然后重新改写, 最后放到 自己的 chrome 插件中。
  • 找点 chromde devtools 的教程视频。

个人接单,python, R语言,有事请私聊

老哥,支持一下啊。

相关推荐
傻啦嘿哟1 分钟前
如何使用 Python 开发一个简单的文本数据转换为 Excel 工具
开发语言·python·excel
大数据编程之光5 分钟前
Flink Standalone集群模式安装部署全攻略
java·大数据·开发语言·面试·flink
初九之潜龙勿用5 分钟前
C#校验画布签名图片是否为空白
开发语言·ui·c#·.net
Dola_Pan23 分钟前
C语言:数组转换指针的时机
c语言·开发语言·算法
ExiFengs23 分钟前
实际项目Java1.8流处理, Optional常见用法
java·开发语言·spring
paj12345678924 分钟前
JDK1.8新增特性
java·开发语言
木子020425 分钟前
前端VUE项目启动方式
前端·javascript·vue.js
IT古董31 分钟前
【人工智能】Python在机器学习与人工智能中的应用
开发语言·人工智能·python·机器学习
繁依Fanyi35 分钟前
简易安卓句分器实现
java·服务器·开发语言·算法·eclipse
endingCode44 分钟前
45.坑王驾到第九期:Mac安装typescript后tsc命令无效的问题
javascript·macos·typescript