问题描述
我正在尝试将属性动态添加到 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)'
<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);
}