JS - 注意event handler 是如何被调用的 - music box

最新推荐文章于 2024-08-13 21:02:23 发布

howlowl

最新推荐文章于 2024-08-13 21:02:23 发布

阅读量196

点赞数

CC 4.0 BY-SA版权

分类专栏： WebDev

本文链接：https://blog.youkuaiyun.com/qq_33471057/article/details/90399253

WebDev 专栏收录该内容

71 篇文章

订阅专栏

博客围绕HTML、CSS展开，探讨了在if(songPlayeer)分支里使用audio的问题。指出audio在每次click event handler调用时重新创建，不同调用里的audio是局部变量，与之前append到DOM中的audio无关联，要操作DOM中的audio需用querySelector。

html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Events</title>
	<link rel="stylesheet" href="style.css" />
</head>
<body>
	<ul class="player">
		<li data-src="audio/Phoebex.mp3">Phoebex</li>
		<li data-src="audio/AmazingLee.mp3">AmazingLee</li>
		<li data-src="audio/NightKitty.mp3">Night Kitty</li>
		<li data-src="audio/EqueKenox.mp3">Eque Kenox</li>
		<li data-src="audio/Shiloah.mp3">Shiloah</li>
	</ul>
<script src="script.js"></script>
</body>
</html>

css

body {
	font: normal 15px/15px Helvetica;
	background: #259286;
}

ul.player {
	width: 180px;
	margin: 0 auto;
	margin-top: 100px;
	list-style: none;
}

ul.player li {
	border-bottom: 1px solid #999;
	color: #444;
	padding: 9px 5px 10px 40px;
	background: url(images/media_btn.png) no-repeat 8px 7px;
	background-color: #EAE3CB;
	background-position: 9px 4px;
	cursor: pointer;
}

ul.player li:first-child {
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	border-top: none;
}

ul.player li:last-child {
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	border-bottom: none;
}

ul.player li:hover {
	background-color: #475B62;
	color: #FCF4DC;
}

ul.player li#playing {
	background: url(images/media_play_btn.png) no-repeat 8px 7px;
	background-color: #FCF4DC;
	color: #2176C7;
	font-weight: bold;
	background-position: 9px 4px;
}

ul.player li#paused {
	background: url(images/media_pause_btn.png) no-repeat 8px 7px;
	background-color: #666;
	color: #FFF;
	font-weight: bold;
	background-position: 9px 4px;
}

为什么一下代码在if(songPlayeer)分支里用 audio不行？

document.querySelector("ul.player").addEventListener("click", function(e) {
    var audio = document.createElement("audio");
    audio.src = e.target.getAttribute("data-src");
    /* giving this element an ID. Now we can just check the document for the 
    existence of a player and if it does exist then I can do stuff to it. */
    var songPlaying = document.querySelector("#player");
    if(songPlaying) {
        if(audio.paused) {  // (a)
            e.target.id = "playing";   
            audio.play();
        } else {
            // console.log(Object.is(songPlaying, audio)); // false
            // console.log(songPlaying === audio);   // false
            // console.log(songPlaying == audio);  // false
            e.target.id = "paused";
            audio.pause();
        }
    } else {
        audio.id = "player";  // (b)
        document.body.appendChild(audio);
        console.log("1 ", audio);
        e.target.id = "playing";
        audio.play();
    
        audio.addEventListener('ended', function() {
            audio.parentNode.removeChild(audio);
            e.target.id = "";
        }, false);
    }

}, false);

audio 是在每次 click event handler 被调用时重新创建的，(a）和（b)处的audio是存在于不同调用里面的local variable。(a) 处的audio 和之前append到DOM中的audio毫无关联。想对dom中audio进行操作，要用querySelector

正确答案：

var jukebox = document.querySelector('ul.player');
jukebox.addEventListener('click', function(e) {
  var songName = e.target.getAttribute('data-src');
  var songPlaying = document.querySelector('#player');

  if (songPlaying) {

    if (songPlaying.paused) {
      songPlaying.play();
      e.target.id = 'playing';
    } else {
      songPlaying.pause();
      e.target.id = 'paused';
    }


  } else {
    var audioPlayer = document.createElement('audio');
    audioPlayer.id = 'player';
    e.target.id = 'playing';
    audioPlayer.src = songName;
    document.body.appendChild(audioPlayer);
    audioPlayer.play();


    audioPlayer.addEventListener('ended', function() {
      audioPlayer.parentNode.removeChild(audioPlayer);
      e.target.id='';
    }, false);
  }

}, false);