DokuWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
|<- [[vpfjsphp:Creating DOM elements with events]]|[[vpfjsphp:Preventing default events]] ->|

<code>
<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);
</code>

=== notes ===

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.