无法从 javascript 动态添加 omouseover 属性答案

【问题标题】：Can't add omouseover attribute dynamically from javascript无法从 javascript 动态添加 omouseover 属性
【发布时间】：2021-10-01 05:16:12
【问题描述】：

我正在尝试将属性动态添加到 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 属性的其他方法，但是上面的方法似乎比我使用的更容易，所以在这里让我知道问题所在。提前谢谢你

【问题讨论】：

这是一个事件，你应该添加为事件监听器

标签： javascript html attr onmouseover

【解决方案1】：

我猜你正在关注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); 
}

【讨论】：

【解决方案2】：

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

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>

【讨论】：