.addEventListener 不起作用

.addEventListener not working

本文关键字：不起作用 addEventListener 更新时间：2023-09-26

我的代码相当简单。.addEventListener 不适用于"单击"或"更改"。我不得不在我的HTML中输入"onclick"，但据我所知，HTML中没有"onChange"事件。我正在尝试制作一个自定义视频播放器，但搜索滑块不起作用。我想知道如何使.addEventListener工作？（附言，在这个问题之前它也没有工作）.HTML：

<div id="video_player_box">
            <video id="my_video" controls autoplay>
                <source src="/videos/video.mp4">
            </video>
            <div id="video_control_bar">
                <button id="playpausebutton" onclick="playPause()">Pause</button>
                <input id="seekslider" type="range" min="0" max="100" value="0" step="1">
            </div>
        </div>

和JS：

var vid, playBtn, seekslider;
            function initPlayer() {
                vid = document.getElementById("my_video");
                playBtn = window.getElementById("playpausebutton");
                seekslider = window.getElementById("seekslider");
                seekslider.addEventListener("change", vidSeek, false);
            }
            window.onload = initPlayer;
            function playPause() {
                if (vid.paused) {
                    vid.play();
                    playBtn.innerHTML = "Pause";
                } else {
                    vid.pause();
                    playBtn.innerHTML = "Play";
                }
            }
            function vidSeek() {
                var seekTo = vid.duration * (seekslider.value / 100);
                vid.currentTime = seekTo;
            }

用这段代码修复你的js代码：

var vid, playBtn, seekslider;
        function initPlayer() {
            vid = document.getElementById("my_video");
            playBtn = document.getElementById("playpausebutton");
            seekslider = document.getElementById("seekslider");
            seekslider.addEventListener("change", vidSeek, false);
        }
        window.onload = initPlayer;
        function playPause() {
            if (vid.paused) {
                vid.play();
                playBtn.innerHTML = "Pause";
            } else {
                vid.pause();
                playBtn.innerHTML = "Play";
            }
        }
        function vidSeek() {
            var seekTo = vid.duration * (seekslider.value / 100);
            vid.currentTime = seekTo;
        }