Assigner l'évènement dans le dom

**patricktoulon** · 27/08/2016, 16h18

Bonjours a tous
sans doute une question idiote mais je continue mon parcours d'apprentissage alors ne m'en voulez pas trop

je créée des éléments dynamiquement
var ppal = document.createElement("div") blablabla etc....
je voudrais savoir si c'est possible ou pas et si oui comment attribuer son évènement avec addEventListener

dans la creation de l'element je lui attribu un ID
actuellement je fait comme suit
mode DOM1

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

//ppal.onclick=function(){palette(this);}

je peut faire comme cela quand j'ai inséré avec appendChild ou insernode( une fois que l'élément est bien dans le document )

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("boutpalette").addEventListener("click", function(){palette(this)});

donc mes deux question sont
et il possible de l'assigner pendant la construction de l'element

2° est ce que dans le code inline je vais retrouver l'appel a la fonction comme avec le Dom1 ou addEventListener met tout ca en mémoire ?????

**patricktoulon** · 27/08/2016, 18h09

c'est bon j'ai 1 reponse sur 2 :
je ne pouvait pas le voir dans l'inspecteur de document car au mouseout mon élément était détruit

reste a savoir si je peut le faire dans le dom ( a la création)

il y a vraiment personne dans le coin ????? Sniff!!!

en tout cas nickel les appels au fonction ne sont pas inline ;pour un WYSIWYG c'est mieux non??

**melka one** · 28/08/2016, 00h21

jour

au lieux d'utiliser this il est préférable d'utiliser event et l'attribut currentTarget qui retourne l'element déclencheur il faut bien comprendre que quand on utilise la methode dom 1 ou addEventListener event est implicitement déclaré

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
 
 
<script type="text/javascript">
 
onload=function(){
 
document.getElementById('id_1').onclick=function(nom_quelconque){alert(nom_quelconque.currentTarget.id);}
 
document.getElementById('id_2').addEventListener('click',function(nom_quelconque){alert(nom_quelconque.currentTarget.id);},false)
}
 
</script>
</head>
<body>
 
<button id="id_1">dom 1</button>
<br><br>
<button id="id_2">dom 2</button>
 
</body>
</html>

les principale raisons d'utiliser addEventListener plutot que le dom 1 son soit pour ajouter plusieurs fois le meme évènement a un element c'est principalement le cas au chargement d'une page quand plusieurs script doivent etres lancé (onload). l'autre raison c'est si on doit retirer un évènement d'un élément en utilisant removeEventListener mais dans ce cas on ne peut utiliser une fonction anonyme car removeEventListener prend en paramètre la fonction a qui on doit retirer l'evenement associé. pour le reste la méthode dom 1 suffit.

il est impératif de bien connaitre l'objet event et ces principale méthode et attribut

**patricktoulon** · 28/08/2016, 00h56

re
Bonsoir MelKa one

je commençais a déprimer tout seul

oui perso j'avais l'habitude d'utiliser le DOM1 car on peut l'intégrer a la création du nœud(element)
mais comme c'est pour un wysiwyg c'a m'ennuyais d'avoir les appels inline dans le code HTML

apres maintenant j'ai un autre soucis et la je n'en pige pas une miette
j'ai bien ma creation dynamique mais des que je met un 2 eme div poff!!!! ca marche plus et la j'avoue que c'est en dehors de ma compréhension

je passe pas mal de temps sur ce truc

voila le code complet de l'ajout div ajout bouton et suppression et recommence etc.....

le bouton rouge qui apparait au coin haut droite du Div quand la souris se promene dedans c'est pour dragger

si tu arrive a m'expliquer pour quoi j'en serais ravi

clique sur le bouton ajouter un div joue avec le bouton rouge du div et ajoute un nouveau div

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE HTML>
<html>
  <head>
   <title>patrick WYSIWYG html </title>
   <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 
<meta http-equiv="X-UA-Compatible" content="IE=10"> 
<style>
#DO{margin-top:3px;height:15px;margin-right:-30px;width:15px;border-radius: 8px;
border:1px solid black;background-color:red;cursor:pointer;}
</style>
<script  type= "text/javascript">
var ED=document.getElementById("editeur");
var DX,DY;
var dragged=null;
/////////////////////////////////////fonction stop drag////////////////////////////////////////////////////////////
function drag_onmouseup(event) {  dragged = null;editeur.contentEditable=true;} //On arrête le drag&drop
//////////////////////////////////////////////fontion de position ///////////////////////////////////////////////////
function WhereMouse( ){
if(dragged !=null){
Mouse_X= event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
Mouse_Y = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
Mouse_X-= DX;Mouse_Y-= DY;  //On applique le décalage
    dragged.style.position = 'absolute';
    dragged.style.left = Mouse_X  + 'px';
    dragged.style.top = Mouse_Y + 'px';
}
}
////////////////////////////////////////////////////////ajout des evenements mousemove et mouse up de l'object document///////////////////////
typeof window.addEventListener == 'undefined' ? document.attachEvent("onmousemove",WhereMouse) : document.addEventListener('mousemove',WhereMouse,false);
typeof window.addEventListener == 'undefined' ? document.attachEvent("onmouseup",drag_onmouseup) : document.addEventListener('mouseup',drag_onmouseup,false);
/////////////////////////////////////////////////////////////////////////////////
function selectionne_text(){return window.getSelection().getRangeAt(0);}   
 ////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////
function insertdiv(){
var divID="div"+ editeur.getElementsByTagName("div").length;
var selection = selectionne_text();var selectedText = selection.extractContents();
var balise = document.createElement('div');balise.id=divID;balise.className="divint";balise .style.width=200+"px";balise.style.height=200+"px";
balise.style.float="left" ;  balise.style.border="0.2pt solid black";balise.style.borderRadius = "25px";   
 if (selection !=""){balise.appendChild(selectedText ); }else{  balise.innerHTML="<p> </p>";}
 /*balise.onclick = function ()   { activelement=document.selection.createRange().parentElement();  } */     
   selection.insertNode(balise);
document.getElementById(divID).addEventListener("mouseover", function(){gripp(this)}); 
 var codediv=document.getElementById("editeur").innerHTML;
      document.getElementById("editeur").innerHTML=codediv.replace(balise.outerHTML, "<p></p>"+ balise.outerHTML +"<p></p>");             
  document.getElementById(divID).addEventListener("mousemove", function(){gripp(this)},true); 
  document.getElementById(divID).addEventListener("mouseout", function(){degripp(this)});
var divID=""
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////
function degripp(element){
var DO=document.getElementById("DO");
if (DO!=null){
X= event.clientX ;   Y = event.clientY ;
var obj=document.elementFromPoint(X,Y);
if (obj.id !="DO"){element.removeChild(DO);}
}
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////
function gripp(element){
var DO=document.getElementById("DO");
if (DO==null){
    var rect = element.getBoundingClientRect (); var L = rect.left; var T = rect.top; var W = rect.width;var H = rect.height;
var doigt=document.createElement("div");
doigt.id="DO";
doigt.style.position="absolute"
doigt.style.left=W-20+"px";
element.insertBefore(doigt, element.childNodes[0]);  
document.getElementById("DO").addEventListener("mousedown", function(){start_drag(this)});
}//fin du if DO
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
function start_drag(element){
dragged=element.parentElement;
event.returnValue = false;
 if( event.preventDefault ) event.preventDefault();
X= event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
   Y = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
var rect = dragged.getBoundingClientRect (); var L = rect.left; var T = rect.top; var W = rect.width;var H = rect.height;
DX=X - L ;DY=Y - T;
editeur.contentEditable=false;} 
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
</script>
</head>
 
<body>
<button  onclick="insertdiv()"> ajouter un div </button>
<div  id="editeur"contentEditable="true" style="height: 600px; width: 700px;border:1px solid black;">
 <p> du texte dans l'editeur</p>
 
 du texte dans mon div</div>
 
<!--div  id="div2"class="divint"  onmouseover="poigneevisible(this)" onmouseout="poigneenonvisible(this)" ></div--!>
 
</div>
</body>
</html>

Assigner l'évènement dans le dom

JavaScript

Discussions similaires

Partager

Partager