为多个id创建事件侦听器的有效方法

Question

这里有一个脚本，我使用它在播放视频时启用全屏模式:

document.getElementById("qmedia").addEventListener("playing", event => {
const player = document.getElementById("qmedia");
if (player.requestFullscreen) 
player.requestFullscreen();
else if (player.webkitRequestFullscreen) 
player.webkitRequestFullscreen();
else if (player.msRequestFullScreen) 
player.msRequestFullScreen();
})

这里的挑战是我的屏幕上有多个视频，我想避免多次复制粘贴相同的脚本。有什么有效的方法吗?在我的视频.qmedia上也有一节课

Answer 1

将id更改为class，然后遍历所有元素，为每个元素添加相同的eventlistener

const players = document.querySelectorAll(".qmedia")
Array.from(players).forEach(
player=>player.addEventListener("playing", event => {
if (player.requestFullscreen) 
player.requestFullscreen();
else if (player.webkitRequestFullscreen) 
player.webkitRequestFullscreen();
else if (player.msRequestFullScreen) 
player.msRequestFullScreen();
}))

<div class="qmedia">Click</div>
<div class="qmedia">Click</div>
<div class="qmedia">Click</div>
<div class="qmedia">Click</div>
<div class="qmedia">Click</div>