Un bouton avec un ID et 2 classes : dans quel ordre sont déclenchés les évènements ?

Johann7751 · 10/05/2011, 10h43

Bonjour,

Disons que j'ai un bouton auquel j'attribue 2 classes "classeA" et "classeB" + un ID "monID".

Code :

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

<input type="text" ID="monID" class="classeA classeB"></input>

Je crée un évènement "click" grâce à un sélecteur sur chacune de ces 2 classes.
Je crée également un évènement "click" avec un sélecteur sur l'ID de mon bouton.
=> On a donc 3 fonctions "click" attribuées au même bouton.

Quand je clique sur mon bouton, dans quel ordre sont déclenchés les évènements clics ?

[EDIT]
Après quelques tests, il semblerait que l'ordre de déclenchement des différents évènements "click" est le même que l'ordre d'apparition des fonctions de traitements de "click" dans le code :
La fonction qui apparâit en 1er dans le code est exécutée en 1er et ainsi de suite.

Mais ce n'est qu'un test, j'aimerais bien que quelqu'un me confirme s'il y a une règle pour l'ordre de déclenchement.
[/EDIT]

Comment c'est géré ?

Merci de vos éclaircissements.

danielhagnoul · 10/05/2011, 22h02

Bonsoir

Situation improbable, mais question intéressante. Je ne connais pas la réponse officielle, mais mon sentiment c'est tous en même temps. Mon test sur IE9, F4 et C11 le confirme.

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
100
101
102
103
104
105
106
107
108
109
110
111
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
		body {background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:serif; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		label {display:block; }
		input {width:250px; }
		input[type="button"] {width:auto; }
		input[required] {border-right:3px solid orange; }
		td {padding:3px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* article */
		/*
		.conteneur {border-collapse:separate; border-spacing:6px; }
		.ligne {display:table-row; }
		article {display:table-cell; border:1px dotted grey; text-align:center; vertical-align:middle; }
		article:nth-of-type(1) {width:200px; height:200px; }
		article:nth-of-type(2) {width:200px; height:200px; }
		*/
 
		/* -- */
 
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<input type="text" ID="monID" class="classeA classeB" value="Cliquer moi SVP !"/>
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<!-- Date ISO format long US : aaaa-mm-qqThh:mm:ss.nnn+hh:mm -->
		<time datetime="2011-05-10T22:02:00.000+02:00" pubdate>2011-05-10</time> <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.min.js"></script>
	<script>
		/*
		 * 	Date ISO format long US par défaut	
		 */
		Date.prototype.formatISO = function(){
			this._nowFormat = 'aaaa-mm-jjThh:ii:ss.000Szz:00';
			this._toLen2 = function(_nowStr){
				_nowStr = _nowStr.toString();
				return ('0'+_nowStr).substr(-2,2);
			};
			this._nowFormat = this._nowFormat.replace(/j+/, this._toLen2(this.getDate()));
			this._nowFormat = this._nowFormat.replace(/m+/, this._toLen2(this.getMonth()+1));
			this._nowFormat = this._nowFormat.replace(/a+/, this.getFullYear());
			this._nowFormat = this._nowFormat.replace(/h+/, this._toLen2(this.getHours()));
			this._nowFormat = this._nowFormat.replace(/i+/, this._toLen2(this.getMinutes()));
			this._nowFormat = this._nowFormat.replace(/s+/, this._toLen2(this.getSeconds()));
			this._nowFormat = this._nowFormat.replace(/s+/, this._toLen2(this.getSeconds()));
			this._nowFormat = this._nowFormat.replace(/S+/, (this.getTimezoneOffset() < 0) ? ("+") : ("-"));
			this._nowFormat = this._nowFormat.replace(/z+/, this._toLen2(Math.abs(this.getTimezoneOffset()/60)));
			return this._nowFormat;
		};
 
		$(function(){
 
			// http://api.jquery.com/event.timeStamp/
			var eventClickHandler = function(e){
				console.log(e.target, new Date(e.timeStamp).formatISO());
			};
 
			$("input").click(eventClickHandler);
			$("#monID").click(eventClickHandler);
			$(".classeA").click(eventClickHandler);
			$(".classeB").click(eventClickHandler);
 
/*
// Firefox 4.0.1
<input id="monID" class="classeA classeB" type="text"> 2011-05-10T21:51:01.000+02:00
<input id="monID" class="classeA classeB" type="text"> 2011-05-10T21:51:01.000+02:00
<input id="monID" class="classeA classeB" type="text"> 2011-05-10T21:51:01.000+02:00
<input id="monID" class="classeA classeB" type="text"> 2011-05-10T21:51:01.000+02:00
 
// IE 9
Journal : [object HTMLInputElement]2011-05-10T21:52:38.000+02:00 
Journal : [object HTMLInputElement]2011-05-10T21:52:38.000+02:00 
Journal : [object HTMLInputElement]2011-05-10T21:52:38.000+02:00 
Journal : [object HTMLInputElement]2011-05-10T21:52:38.000+02:00 
 
 
// Chrome 11
<input type=&#8203;"text" id=&#8203;"monID" class=&#8203;"classeA classeB">&#8203;
 "2011-05-10T21:53:58.000+02:00"
<input type=&#8203;"text" id=&#8203;"monID" class=&#8203;"classeA classeB">&#8203;
 "2011-05-10T21:53:58.000+02:00"
<input type=&#8203;"text" id=&#8203;"monID" class=&#8203;"classeA classeB">&#8203;
 "2011-05-10T21:53:58.000+02:00"
<input type=&#8203;"text" id=&#8203;"monID" class=&#8203;"classeA classeB">&#8203;
 "2011-05-10T21:53:58.000+02:00"
*/
		});
	</script>
</body>  
</html>

w3ar3dus1 · 12/05/2011, 11h13

Ouep, les évènements s'executent dans l'ordre où il sont enregistrés par jQuery. Tu peut toujours faire un plugin pour insérer tes évènements où tu veut.
Il y a un sujet interressant sur stackoverflow.
http://stackoverflow.com/questions/2...-way-around-th

danielhagnoul · 12/05/2011, 20h32

Bonsoir

En conclusion, il y a deux aspects à la question :

Le "timeStamp" montre que les événements se produisent en même temps, mais bien entendu jQuery n'exécute qu'une fonction à la fois.
C'est pourquoi .jQuery.data("events") gère la file d'attende des gestionnaires d'événements, ils seront appelés dans l'ordre d'insertion dans le script jQuery.

Pour modifier l'ordre des appels, le plus sûr (le moins hasardeux vu la fréquence des modifications du code jQuery) est de simplement modifier l'ordre d'insertion dans le script.

[Edit 2011-05-12T21:50:00.000+02:00]

Pour contrôler l'ordre d'appel des gestionnaires d'événement, on peut utiliser un objet différé :

[Edit Code, 2011-05-14T11:10:00.000+02:00]

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
		body {background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:serif; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		label {display:block; }
		input {width:250px; }
		input[type="button"] {width:auto; }
		input[required] {border-right:3px solid orange; }
		td {padding:3px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* article */
		/*
		.conteneur {border-collapse:separate; border-spacing:6px; }
		.ligne {display:table-row; }
		article {display:table-cell; border:1px dotted grey; text-align:center; vertical-align:middle; }
		article:nth-of-type(1) {width:200px; height:200px; }
		article:nth-of-type(2) {width:200px; height:200px; }
		*/
 
		/* -- */
 
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<input type="text" ID="monID" class="classeA classeB" value="Cliquer moi SVP !"/>
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<!-- Date ISO format long US : aaaa-mm-qqThh:mm:ss.nnn+hh:mm -->
		<time datetime="2011-05-14T11:02:00.000+02:00" pubdate>2011-05-14</time> <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.min.js"></script>
	<script>
		// Date ISO format long US
		Date.prototype.formatISO = function(){
			this._nowFormat = 'aaaa-mm-jjThh:ii:ss.000Szz:00';
			this._toLen2 = function(_nowStr){
				_nowStr = _nowStr.toString();
				return ('0'+_nowStr).substr(-2,2);
			};
			this._nowFormat = this._nowFormat.replace(/j+/, this._toLen2(this.getDate()));
			this._nowFormat = this._nowFormat.replace(/m+/, this._toLen2(this.getMonth()+1));
			this._nowFormat = this._nowFormat.replace(/a+/, this.getFullYear());
			this._nowFormat = this._nowFormat.replace(/h+/, this._toLen2(this.getHours()));
			this._nowFormat = this._nowFormat.replace(/i+/, this._toLen2(this.getMinutes()));
			this._nowFormat = this._nowFormat.replace(/s+/, this._toLen2(this.getSeconds()));
			this._nowFormat = this._nowFormat.replace(/s+/, this._toLen2(this.getSeconds()));
			this._nowFormat = this._nowFormat.replace(/S+/, (this.getTimezoneOffset() < 0) ? ("+") : ("-"));
			this._nowFormat = this._nowFormat.replace(/z+/, this._toLen2(Math.abs(this.getTimezoneOffset()/60)));
			return this._nowFormat;
		};
 
		// retourne X tel que : min <= X <= max
		function intRandom(min, max){
			return Math.floor(Math.random() * (max - min + 1) + min);
		}
 
		$(function(){
			var inputClickEventHandler = function(e){
				console.log("inputClickEventHandler", e.target, new Date(e.timeStamp).formatISO());
			};
 
			var classeAClickEventHandler = function(e){
				console.log("classeAClickEventHandler", e.target, new Date(e.timeStamp).formatISO());
			};
 
			var monIDClickEventHandler = function(e){
				console.log("monIDClickEventHandler", e.target, new Date(e.timeStamp).formatISO());
			};
 
			var classeBClickEventHandler = function(e){
				console.log("classeBClickEventHandler", e.target, new Date(e.timeStamp).formatISO());
			};
 
			/*
			 * On crée un objet différé et l'on ajoute à
			 * la file d'attente qui sera exécutée en cas
			 * de succès, les fonctions dans l'ordre voulu.
			 */
			var objDif = $.Deferred();
 
			$("input, #monID, .classeA, .classeB").click(function(e){
				objDif.resolve(e);
			});
 
			switch(intRandom(1, 4)){
				case 1:
					objDif.done([monIDClickEventHandler, classeAClickEventHandler, inputClickEventHandler, classeBClickEventHandler]);
					break;
				case 2:
					objDif.done([classeAClickEventHandler, monIDClickEventHandler, inputClickEventHandler, classeBClickEventHandler]);
					break;
				case 3:
					objDif.done([classeAClickEventHandler, inputClickEventHandler,monIDClickEventHandler, classeBClickEventHandler]);
					break;
				case 4:
					objDif.done([classeAClickEventHandler, inputClickEventHandler, classeBClickEventHandler, monIDClickEventHandler]);
					break;
			}
 
			/*
			// Firebug, case 1 :
			monIDClickEventHandler <input id="monID" class="classeA classeB" type="text"> 2011-05-12T21:39:50.000+02:00
			classeAClickEventHandler <input id="monID" class="classeA classeB" type="text"> 2011-05-12T21:39:50.000+02:00
			inputClickEventHandler <input id="monID" class="classeA classeB" type="text"> 2011-05-12T21:39:50.000+02:00
			classeBClickEventHandler <input id="monID" class="classeA classeB" type="text"> 2011-05-12T21:39:50.000+02:00
			*/
		});
	</script>
</body>  
</html>

10/05/2011, 10h43	#1
Johann7751 Membre régulier Johann Analyste Programmeur Junior Inscription : février 2009 Messages : 216 Détails du profil Informations personnelles : Nom : Johann Âge : 26 Localisation : France Informations professionnelles : Activité : Analyste Programmeur Junior Informations forums : Inscription : février 2009 Messages : 216 Points : 98 Points : 98	Un bouton avec un ID et 2 classes : dans quel ordre sont déclenchés les évènements ? Bonjour, Disons que j'ai un bouton auquel j'attribue 2 classes "classeA" et "classeB" + un ID "monID". Code : Sélectionner tout - Visualiser dans une fenêtre à part <input type="text" ID="monID" class="classeA classeB"></input> Je crée un évènement "click" grâce à un sélecteur sur chacune de ces 2 classes. Je crée également un évènement "click" avec un sélecteur sur l'ID de mon bouton. => On a donc 3 fonctions "click" attribuées au même bouton. Quand je clique sur mon bouton, dans quel ordre sont déclenchés les évènements clics ? [EDIT] Après quelques tests, il semblerait que l'ordre de déclenchement des différents évènements "click" est le même que l'ordre d'apparition des fonctions de traitements de "click" dans le code : La fonction qui apparâit en 1er dans le code est exécutée en 1er et ainsi de suite. Mais ce n'est qu'un test, j'aimerais bien que quelqu'un me confirme s'il y a une règle pour l'ordre de déclenchement. [/EDIT] Comment c'est géré ? Merci de vos éclaircissements.
	00

12/05/2011, 11h13	#3
w3ar3dus1 Nouveau Membre du Club Kevin Webdesigner & Intégrateur web Inscription : mai 2011 Messages : 23 Détails du profil Informations personnelles : Nom : Kevin Localisation : France, Loir et Cher (Centre) Informations professionnelles : Activité : Webdesigner & Intégrateur web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2011 Messages : 23 Points : 27 Points : 27	Ouep, les évènements s'executent dans l'ordre où il sont enregistrés par jQuery. Tu peut toujours faire un plugin pour insérer tes évènements où tu veut. Il y a un sujet interressant sur stackoverflow. http://stackoverflow.com/questions/2...-way-around-th
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email