如何高效为多个带.qmedia类的视频添加事件监听器？

不用重复复制脚本，通过批量选择+事件复用就能搞定，具体实现如下：

基础静态页面方案 #

如果页面上的视频是静态渲染的，直接批量获取元素并绑定事件即可：

// 获取所有带.qmedia类的视频元素
const players = document.querySelectorAll('.qmedia');

// 封装全屏逻辑函数，复用代码
function enterFullscreen(player) {
    if (player.requestFullscreen) {
        player.requestFullscreen();
    } else if (player.webkitRequestFullscreen) {
        player.webkitRequestFullscreen();
    } else if (player.msRequestFullScreen) {
        player.msRequestFullScreen();
    }
}

// 给每个视频绑定播放触发事件
players.forEach(player => {
    player.addEventListener('playing', (event) => {
        // 通过event.target直接获取当前播放的视频元素，避免重复DOM查询
        enterFullscreen(event.target);
    });
});

动态视频适配方案 #

如果页面存在异步加载的视频（比如滚动加载、接口渲染），用事件委托更高效，不用每次新增视频都重新绑定：

// 假设所有.qmedia视频都挂载在固定父容器内（比如id为video-wrap的元素）
const videoParent = document.getElementById('video-wrap');

// 复用全屏逻辑函数
function enterFullscreen(player) {
    if (player.requestFullscreen) {
        player.requestFullscreen();
    } else if (player.webkitRequestFullscreen) {
        player.webkitRequestFullscreen();
    } else if (player.msRequestFullScreen) {
        player.msRequestFullScreen();
    }
}

// 给父容器绑定事件，通过事件冒泡判断触发源
videoParent.addEventListener('playing', (event) => {
    // 确认触发事件的是目标视频元素
    if (event.target.classList.contains('qmedia')) {
        enterFullscreen(event.target);
    }
});

核心优化点 #

• 用document.querySelectorAll('.qmedia')一次性批量获取目标元素，避免重复代码
• 把全屏逻辑封装成独立函数，方便后续修改和复用
• 事件回调中使用event.target直接获取当前播放的视频，减少不必要的DOM查询
• 事件委托方案适配动态场景，无需重复执行绑定操作

内容的提问来源于stack exchange，提问作者Sujit Singh