无法从 javascript 动态添加 omouseover 属性

如何解决无法从 javascript 动态添加 omouseover 属性

我正在尝试将属性动态添加到 img 标签中，但只有 onmouseenter 未包含在内，其他所有内容都已完美添加

let img_elem = document.createElement('img')
                img_elem.src = movies[i].large_cover_image
                img_elem.alt = 'poster'
                img_elem.id = i
                img_elem.className ='poster'
                img_elem.onmouSEOver = 'give_me_id(this)'

这是我动态添加属性后的HTML

<img src="https://yts.mx/assets/images/movies/woodstock_99_peace_love_and_rage_2021/large-cover.jpg" alt="poster" id="0" class="poster">

只是 onmouSEOver 的一个问题，其他一切正常。 我已经找到了添加 onmouSEOver 属性的其他方法，但上述方法似乎比我使用的更容易，所以请在这里告诉我问题。提前致谢

解决方法

它不起作用，因为我们正在尝试添加属性，但我们真正想要的是添加事件侦听器。下面是代码，请尝试

let img_elem = document.createElement('img');
  img_elem.src = 'https://upload.wikimedia.org/wikipedia/commons/1/12/User_icon_2.svg'
  img_elem.alt = 'poster';
  img_elem.id = 'img1'; //i;
  img_elem.className ='poster';
  img_elem.addEventListener("mouseover",function(event){console.log('mouseover');});
  document.getElementById('imgParent').appendChild(img_elem);

<div id='imgParent'>
</div>

,

我猜您是在关注 W3Schools example，但该示例是通过属性添加方法。你真的不能在 javascript 代码中做到这一点。相反，您发送一个函数，然后使用 event.target 来获取用户悬停的图像。我再迈出一步，并使用速记属性（我认为这就是名称）通过使用 {target} 直接获取目标。

另一种方法是添加一个事件监听器，就像 Bharat 的回答一样。

const imageIds = [100,200,400];

for (const id of imageIds) {
  let img_elem = document.createElement('img');

  img_elem.src = `https://picsum.photos/id/${id}/200/200`;
  img_elem.alt = 'poster';
  img_elem.id  = id;
  img_elem.className   = 'poster';
  img_elem.onmouseover = giveMeId;

  document.body.appendChild(img_elem);
}

function giveMeId({target}) {
  console.log('id:',target.id); 
}