DokuWiki vpfjsphp
https://www.wiki.leomartin.net/
2026-04-07T16:37:05+00:00DokuWiki
https://www.wiki.leomartin.net/
https://www.wiki.leomartin.net/lib/tpl/dokuwiki/images/favicon.icotext/html2016-03-06T22:02:10+00:00Anonymous (anonymous@undisclosed.example.com)vpfjsphp:adding_touch_events
https://www.wiki.leomartin.net/doku.php?id=vpfjsphp:adding_touch_events&rev=1457298130&do=diff
<- Dealing with layersNext steps ->
adjust viewport
<meta name="viewport" content="width=1200">
<meta name="apple-mobile-web-app-capable" content="yes">
touchstart
function touch_start(e) {
e.preventDefault();
var which_art = e.target;
var touch = e.touches[0];
var move_offset_x = which_art.offsetLeft - touch.pageX;
var move_offset_y = which_art.offsetTop - touch.pageY;
resetZ();
which_art.style.zIndex = 10;
which_art.addEventListener('touchmove', function() {
var p…text/html2016-02-21T22:27:52+00:00Anonymous (anonymous@undisclosed.example.com)vpfjsphp:analyzing_event_properties
https://www.wiki.leomartin.net/doku.php?id=vpfjsphp:analyzing_event_properties&rev=1456090072&do=diff
<- Using events with old browsersUnderstanding event propagation ->
Une fois qu'un événement est enregistré et capturé, on obtient en retour du navigateur un objet événement (Event Object). Il peut différer selon la version du navigateur. Les données reçues dépendent aussi du type d'événement. Cependant la majorité des données est commune. On reçoit aussi beaucoup d'info sur l'environnement et le navigateur.text/html2016-03-06T11:53:44+00:00Anonymous (anonymous@undisclosed.example.com)vpfjsphp:cancelling_default_behavior
https://www.wiki.leomartin.net/doku.php?id=vpfjsphp:cancelling_default_behavior&rev=1457261624&do=diff
<- Stopping event propagation Removing DOM elements with events ->
annuler un comportement par défaut
Exemples :
* clic sur un lien
* soumission de formulaire
On utilise la méthode preventDefault()
<a id="mon_lien" href="http://link.org">un lien</a>
document.getElementById("mon_lien").addEventListener("click", function(e) {
e.stopPropagation();
},false);text/html2016-03-06T12:33:55+00:00Anonymous (anonymous@undisclosed.example.com)vpfjsphp:cleaning_up_event_issues
https://www.wiki.leomartin.net/doku.php?id=vpfjsphp:cleaning_up_event_issues&rev=1457264035&do=diff
<- Removing DOM elements with eventsCreating DOM elements with events ->
<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("click", function(e) {
console.dir(e.target);
if (e.target.tagName === "IMG") {
var nb_de_li_restants = this.querySelectorAll('li').length;
if (nb_de_li_restants > 1){
var removeTarget = e.target.parentNode; // li
r…text/html2016-03-06T14:12:59+00:00Anonymous (anonymous@undisclosed.example.com)vpfjsphp:creating_a_spinner_graphic_for_large_image_loads
https://www.wiki.leomartin.net/doku.php?id=vpfjsphp:creating_a_spinner_graphic_for_large_image_loads&rev=1457269979&do=diff
<- Preventing default eventsPlaying media events ->
Events Reference : developper.mozilla.org/en-US/docs/Web/Reference/Events
onload events
document.querySelector('img.preview').addeventListener('function(e) {
var lowRes = e.target.src;
var myOverlay = document.querySelector('.overlay');
var HighRes = document.createElement('img');
var mySpinner = document.createElement('img');
myOverlay.style.display = 'block';
highRes.className = 'bgImg';
highRes.src = lowRes.substr(0,lowre…text/html2016-03-06T12:50:09+00:00Anonymous (anonymous@undisclosed.example.com)vpfjsphp:creating_dom_elements_with_events
https://www.wiki.leomartin.net/doku.php?id=vpfjsphp:creating_dom_elements_with_events&rev=1457265009&do=diff
<- Cleaning up event issuesRemoving an event ->
<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_loca…text/html2016-03-06T21:49:57+00:00Anonymous (anonymous@undisclosed.example.com)vpfjsphp:dealing_with_layers
https://www.wiki.leomartin.net/doku.php?id=vpfjsphp:dealing_with_layers&rev=1457297397&do=diff
<- Dragging and droppingAdding touch events ->
(...)
function resetZ() {
var elements = document.querySelectorAll('img');
for (var i = elements.length - 1; i >= 0; i--) {
elements[i].style.zIndex = 5;
}
}
(...)text/html2016-03-06T21:32:26+00:00Anonymous (anonymous@undisclosed.example.com)vpfjsphp:dragging_and_dropping
https://www.wiki.leomartin.net/doku.php?id=vpfjsphp:dragging_and_dropping&rev=1457296346&do=diff
<- Starting to dragDealing with layers ->
html5rocks.com/en/tutorials/dnd/basics/
* dragstart
* drag
* dragenter
* dragleave
* dragover
* drop
* dragend
(...)
function move_start(e) {
e.preventDefault();
}
function move_drag_over(e) {
e.preventDefault(); // preventing quircky behaviour
}
function moveDrop(e) {
e.preventDefault();
which_art.style.left = e.pageX - my_x + 'px';
which_art.style.top = e.pageY - my_y + 'px';
}
(...)
document.querySelector("body").addEventL…text/html2016-03-06T21:22:59+00:00Anonymous (anonymous@undisclosed.example.com)vpfjsphp:handling_media_pauses
https://www.wiki.leomartin.net/doku.php?id=vpfjsphp:handling_media_pauses&rev=1457295779&do=diff
<- Monitoring media-ended eventsStarting a new song ->
(...)
var song_playing = document.querySelector("#player");
if (song_playing") {
if (song_playing.paused) {
songPlaying.play();
e.target.id = "playing";
} else {
songPlaying.play();
e.target.id = "paused";
}
} else {
(...) // previous code
}text/html2016-02-21T22:10:32+00:00Anonymous (anonymous@undisclosed.example.com)vpfjsphp:introduction
https://www.wiki.leomartin.net/doku.php?id=vpfjsphp:introduction&rev=1456089032&do=diff
What you should know ->
- events propagation
* event registration in the capturing (?) as well as in the bublling face (re-?)
* stop propagation
* cancel an element or event default behaviourtext/html2016-03-06T21:21:22+00:00Anonymous (anonymous@undisclosed.example.com)vpfjsphp:monitoring_media-ended_events
https://www.wiki.leomartin.net/doku.php?id=vpfjsphp:monitoring_media-ended_events&rev=1457295682&do=diff
<- Playing media eventsHandling media pauses ->
(...)
audio_player.addEventListener('ended', function() {
audio_player.parentNode.removeChild(audio_player);
e.target.id = "";
}
méthodes
* play
* pause
* ended
* ...text/html2016-03-06T22:15:19+00:00Anonymous (anonymous@undisclosed.example.com)vpfjsphp:next_steps
https://www.wiki.leomartin.net/doku.php?id=vpfjsphp:next_steps&rev=1457298919&do=diff
<- Adding touch events ->
* JavaScript and JSON
* JavaScript and AJAX
* JavaScript : enhancing the DOMtext/html2016-03-06T14:37:46+00:00Anonymous (anonymous@undisclosed.example.com)vpfjsphp:playing_media_events
https://www.wiki.leomartin.net/doku.php?id=vpfjsphp:playing_media_events&rev=1457271466&do=diff
<- Creating a spinner graphic for large image loadsMonitoring media-ended events ->
<ul class="player">
<li data-src="audio/audio_1.mp3">audio 1</li>
<li data-src="audio/audio_2.mp3">audio 2</li>
<li data-src="audio/audio_3.mp3">audio 3</li>
</ul>
var jukebox = document.querySelector('ul.player');
jukebox.addEventListener('click', function(e) {
var audio_player = document.createElement('audio');
var piste = e.target.getAttribute('data-src');
e.target.id = "playing";
audio_pla…text/html2016-03-06T21:27:10+00:00Anonymous (anonymous@undisclosed.example.com)vpfjsphp:preparing_svg_assets
https://www.wiki.leomartin.net/doku.php?id=vpfjsphp:preparing_svg_assets&rev=1457296030&do=diff
<- What we'll be buildingSetting up our core files ->text/html2016-03-06T13:45:56+00:00Anonymous (anonymous@undisclosed.example.com)vpfjsphp:preventing_default_events
https://www.wiki.leomartin.net/doku.php?id=vpfjsphp:preventing_default_events&rev=1457268356&do=diff
<- Removing an eventCreating a spinner graphic for large image loads ->
document.querySelector(".selecteur").addEventListener("contextmenu", function(e) {
e.preventDefault();
(...)
e.target.addEventListener('mousemove', function(f) {
mon_element.style.left = f.offsetX + 15 + 'px';
}
}, false);text/html2016-03-07T15:32:41+00:00Anonymous (anonymous@undisclosed.example.com)vpfjsphp:removing_an_event
https://www.wiki.leomartin.net/doku.php?id=vpfjsphp:removing_an_event&rev=1457361161&do=diff
<- Creating DOM elements with eventsPreventing default events ->
<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");…text/html2016-03-06T12:38:12+00:00Anonymous (anonymous@undisclosed.example.com)vpfjsphp:removing_dom_elements_with_events
https://www.wiki.leomartin.net/doku.php?id=vpfjsphp:removing_dom_elements_with_events&rev=1457264292&do=diff
<- Cancelling default behaviorCleaning up event issues ->
<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("click", function(e) {
console.log(e);
var removeTarget = e.target.parentNode; // li
removeTarget.parentNode.removeChild(removeTarget); // on sélectionne encore le parenty pour pouvoir utiliser la méthode removeChild()
}, false);
// code non suf…text/html2016-03-06T21:29:32+00:00Anonymous (anonymous@undisclosed.example.com)vpfjsphp:setting_up_our_core_files
https://www.wiki.leomartin.net/doku.php?id=vpfjsphp:setting_up_our_core_files&rev=1457296172&do=diff
<- Preparing SVG assetsStarting to drag ->
* draggagble attribute
[draggable] {
// code CSS
}text/html2016-03-06T21:24:47+00:00Anonymous (anonymous@undisclosed.example.com)vpfjsphp:starting_a_new_song
https://www.wiki.leomartin.net/doku.php?id=vpfjsphp:starting_a_new_song&rev=1457295887&do=diff
<- Handling media pausesWhat we'll be building ->
(...)
if (song_playing) {
(...)
if (song_name === song_playing.getAttribute("src")) {
if (song_playing.paused) {
songPlaying.play();
e.target.id = "playing";
} else {
songPlaying.play();
e.target.id = "paused";
}
} else {
song_playing.src = song_name;
song_playing.play();
if (document.querySelector("#playing")) {
document.querySelector("#playing").id="";
} else {
docum…text/html2016-03-06T21:30:59+00:00Anonymous (anonymous@undisclosed.example.com)vpfjsphp:starting_to_drag
https://www.wiki.leomartin.net/doku.php?id=vpfjsphp:starting_to_drag&rev=1457296259&do=diff
<- Setting up our core filesDragging and dropping ->
* namespacing
var drag_n_drop = (function(){
// protected namespace
var my_x = "";
var my_y = "";
var which_art = "";
function move_start(e) {
which_art = e.target;
my_x = e.offsetX === undefined ? e.layerX : e.offsetX; // le premier étant supporté par firefox, le second par webkit + IE (plus exactement si offsetX n'est pas supporté on passe à l'autre méthode.
my_y = e.offsetY === undefined ? e.layerY : e.offsetY;
…text/html2016-03-06T11:47:26+00:00Anonymous (anonymous@undisclosed.example.com)vpfjsphp:stopping_event_propagation
https://www.wiki.leomartin.net/doku.php?id=vpfjsphp:stopping_event_propagation&rev=1457261246&do=diff
<- Understanding event propagationCancelling default behavior ->
Méthode normale
stopPropagation()
mon_element.addEventListener('click',function(e) {
console.log("clic sur mon_element.");
e.stopPropagation();
}, false);
<IE8
on assigne la valeur true à la propriété cancelbubble
cancelbubble = true;text/html2016-02-24T01:05:31+00:00Anonymous (anonymous@undisclosed.example.com)vpfjsphp:understanding_event_propagation
https://www.wiki.leomartin.net/doku.php?id=vpfjsphp:understanding_event_propagation&rev=1456272331&do=diff
<- Analyzing event propertiesStopping event propagation ->
Event propagation :
* lorsqu'un élément parent capte les événements liés aux éléments enfants.
* C'est une des raisons de préférer addEventListener()
capturing vs bubbling
2 différents modèles de propagation différents selon les navigateurs.text/html2016-02-21T22:16:49+00:00Anonymous (anonymous@undisclosed.example.com)vpfjsphp:understanding_event_registration
https://www.wiki.leomartin.net/doku.php?id=vpfjsphp:understanding_event_registration&rev=1456089409&do=diff
<- Using the exercise filesUsing events with old browsers ->
Le javascript éxécute habituellement le code de manière séquentielle, dans l'ordre où celui-ci est lu par le navigateur.
Les événements permettent de faire exécuter du code au navigateur lorsque ceux-ci sont triggered par le navigateur.text/html2016-02-21T22:21:00+00:00Anonymous (anonymous@undisclosed.example.com)vpfjsphp:using_events_with_old_browsers
https://www.wiki.leomartin.net/doku.php?id=vpfjsphp:using_events_with_old_browsers&rev=1456089660&do=diff
<- Understanding event registrationAnalyzing event properties ->
Problème des vieux navigateurs : principalement <= IE8 qui utilisent la méthode attachEvent().
" IE9 : addEventListener()"
document.getElementById('mon_id').addEventListener('<event>', function() { <code à exécuter> }, <booléen:type de propagation>);text/html2016-03-06T21:26:13+00:00Anonymous (anonymous@undisclosed.example.com)vpfjsphp:what_we_ll_be_building
https://www.wiki.leomartin.net/doku.php?id=vpfjsphp:what_we_ll_be_building&rev=1457295973&do=diff
<- Starting a new songPreparing SVG assets ->