如何通过点击对象的Image属性（歌曲海报）获取该对象所有属性？

我正在开发一个音乐播放器项目，想给歌曲海报添加点击事件，实现点击后播放对应单曲。具体需求是：点击海报后获取对应的歌曲文件，将其存入state再传递给音乐播放器。想知道怎么通过点击对象的Image属性（海报）获取该对象的所有属性？

代码示例：

const songs = [
  {
    artist: 'Kings of Leon',
    songName: 'Pyro',
    poster: KingsOfLeon, // 点击的图片
    songFile: KingsOfLeonPyro // 需要存入state的歌曲文件
  }
]

核心思路是在渲染海报时，直接把对应的歌曲对象绑定到点击事件上，这样点击时就能直接拿到完整的歌曲信息，不用通过海报反向查找。

React 场景实现 #

1. 遍历歌曲数组渲染海报，给每个img元素添加点击事件，并传入当前歌曲对象：

import { useState } from 'react';

function MusicPlayer() {
  const [currentSong, setCurrentSong] = useState(null);
  const songs = [
    {
      artist: 'Kings of Leon',
      songName: 'Pyro',
      poster: KingsOfLeon,
      songFile: KingsOfLeonPyro
    }
  ];

  // 处理歌曲点击事件
  const handleSongClick = (song) => {
    // 将完整歌曲对象存入state
    setCurrentSong(song);
    // 这里可以直接使用song.songFile调用播放器播放逻辑
    console.log('播放歌曲:', song.songName);
  };

  return (
    <div className="song-list">
      {songs.map((song) => (
        <img
          key={song.songName} // 使用唯一标识作为key
          src={song.poster}
          alt={`${song.artist} - ${song.songName}`}
          onClick={() => handleSongClick(song)}
          style={{ cursor: 'pointer' }}
        />
      ))}
    </div>
  );
}

原生 JavaScript 场景实现 #

如果是原生JS项目，可以利用元素的自定义属性存储歌曲对象的索引：

const songs = [
  {
    artist: 'Kings of Leon',
    songName: 'Pyro',
    poster: KingsOfLeon,
    songFile: KingsOfLeonPyro
  }
];

const songList = document.querySelector('.song-list');

// 渲染海报
songs.forEach((song, index) => {
  const img = document.createElement('img');
  img.src = song.poster;
  img.alt = `${song.artist} - ${song.songName}`;
  // 存储歌曲索引到自定义属性
  img.dataset.songIndex = index;
  img.style.cursor = 'pointer';
  // 添加点击事件
  img.addEventListener('click', handleSongClick);
  songList.appendChild(img);
});

// 处理点击事件
function handleSongClick(e) {
  const songIndex = e.target.dataset.songIndex;
  const selectedSong = songs[songIndex];
  // 获取完整歌曲对象后，即可访问songFile
  console.log('播放歌曲:', selectedSong.songFile);
}

逻辑说明 #

这种方式直接将歌曲对象和点击事件绑定，避免了通过海报属性反向查找数组元素的麻烦，逻辑更清晰，也能有效避免因重复海报（多个歌曲用同一张图）导致的匹配错误问题。

内容的提问来源于stack exchange，提问作者Gavin-walsh