<ul class="selecteur">
<li><img src="img_1.jpg" /></li>
<li><img src="img_2.jpg" /></li>
<li><img src="img_3.jpg" /></li>
</ul>
document.querySelector(".selecteur").addEventListener("mouseover", function(e) {
var mon_element = document.createElement('div');
mon_element.id = "mon_id";
mon_element.className = "ma_classe";
e.target.parentNode.appendChild(mon_element);
var mon_image = document.createElement("img");
var image_location = e.target.src;
mon_image.src = image_location.substr(0, image_location.length-7) + '.jpg';
mon_element.appendchild(mon_image);
e.target.addEventListener('mouseout', function handler(d) {
var mon_node = e.target.parentNode.querySelector("div.ma_classe");
mon_node.parentNode.removeChild(mon_node);
e.target.removeEventListener('mouseout', handler, false);
}, false);
}, false);
Ici on enregistre un eventListener à l'intérieur d'un autre, il ne sera donc enregistré qu'une fois l'autre événement actionné (mousein).
Les événement enregistré sont mis dans une queue.