Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

dispatcher des événements clavier

6 réponses
Avatar
unbewusst.sein
j'utilise les événements en provenance du clavier (key events) à deux
fins :

- au niveau de la fenêtre, par exemple ^+b me donne la couleur de fond
de l'élément survolé par la souris ;

- sur une page, j'ai des sliders et je souhaite qu'une frappe de la
flèche droite déplace le slider vers la droite.

bon, ces deux handlers marchent indépendamment l'un de l'autre, pas de
pb.


mais comment faire en sorte que les deux puissent fonctionner
simultanément ?

dans le premier cas, je fais :

document.onmousemove=function(e){
var position=[e.pageX,e.pageY];
document.onkeydown=function(e){...};
};

par le 'onmousemove' je m'assure de pouvoir retrouver l'élément sous la
souris et donc sa couleur de fond, ou de texte.

dans le second :

_bkg_img_node.onmouseover=function(){
_mouseover=true;
this.firstChild.src='slider/background_hover.png';
document.onkeydown=keyDownHandler;
return false;
};
_bkg_img_node.onmouseout=function(){
_mouseover=false;
this.firstChild.src='slider/background.png';
document.onkeydown=null;
return false;
};

function keyDownHandler(e){
var tick=1;
if(window.event){e=window.event;}
if(e.ctrlKey){tick=10;}
switch(e.keyCode){
case 37:_that.decreaseValue(tick);break;
case 38:_that.setToMax();break;
case 39:_that.increaseValue(tick);break;
case 40:_that.setToMin();break;
}
return false;
}

là par le 'mouseover' je n'actionne le handler que lorsque je suis au
dessus d'un slider donné (j'en ai 6 en tout).

--
Une Bévue

6 réponses

Avatar
unbewusst.sein
Une Bévue wrote:

mais comment faire en sorte que les deux puissent fonctionner
simultanément ?


une première solution "toute bêbête" est de prendre onkeydown dans un
cas, et onkeyup dans l'autre, ça roule...

mais bon si quelqu'un a une solution plus générale...
--
Une Bévue

Avatar
Mickaël Wolff
mais comment faire en sorte que les deux puissent fonctionner
simultanément ?


Dans le lien que j'ai posté à ton précédent sujet, il y a la
description de l'API DOM Events. Il y est expliqué comment gérer
plusieurs gestionnaires d'événements de manière normaliser sur un même
élément
<http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-EventTarget-addEventListener>.

Attention, MSIE jusqu'à au moins la version 6 n'est pas compatible, et
utilises une autre API pour attacher les événements.

--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org

Avatar
unbewusst.sein
Mickaël Wolff wrote:


Dans le lien que j'ai posté à ton précédent sujet, il y a la
description de l'API DOM Events. Il y est expliqué comment gérer
plusieurs gestionnaires d'événements de manière normaliser sur un même
élément
<http://www.w3.org/TR/DOM-Level-3-Events/
events.html#Events-EventTarget-addEventListener>


ah ok, il faut le faire de cette manière (addEventListenr) pas bêtemnt
par :

ma_div.onkeydown=keyDownHandler; ...



Attention, MSIE jusqu'à au moins la version 6 n'est pas compatible, et
utilises une autre API pour attacher les événements.


oui, MSIE je sais mais je n'ai pas de quoi tester sur MSIE...


merci pour ces infos !
--
Une Bévue

Avatar
unbewusst.sein
Mickaël Wolff wrote:


<http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-EventTarget-

addEventListener>.

j'ai trouvé un tuto "basique" là :
<http://catcode.com/domcontent/events/index.html>
--
Une Bévue

Avatar
unbewusst.sein
Mickaël Wolff wrote:


<http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-EventTarget-

addEventListener>.

OK, merci, ce que j'avais avant (et qui "marchotait" càd keyup d'un côté
et keydown de l'autre) :

_bkg_img_node.onmouseover=function(){
_mouseover=true;
this.firstChild.src='slider/background_hover.png';
document.onkeyup=keyupHandler;
//----^^^^^^^^
return false;
};

comme il peut y a avoir conflit avec les events gérés par document, je
préfère donc utiliser "addEventListener", donc je passe à :

_bkg_img_node.addEventListener( "mouseover", mouseoverHandler, false );
_bkg_img_node.addEventListener( "mouseout", mouseoutHandler, false );
_bkg_img_node.addEventListener( "keyup", keyupHandler, false );

avec, par exemple pour mouseoverHandler :

function mouseoverHandler(e){
_mouseover=true;
var node=e.target;
if(node.nodeName==='img'){node.src='slider/background_hover.png';}
}

ça marche impec comment avant...
mais déjà, l'événement est reçu par l'image dans la <div />, ce qui
m'arrange d'ailleurs, le but étant de la changer...

alors que "_bkg_img_node" est obtenu par :
_bkg_img_node=document.createElement('div');
donc pourquoi ???

ensuite si j'ai pour "keyupHandler" :
function keyupHandler(e){alert('keyupHandler');}

pas d'alerte ;-)


j'intuite qu'il y a un pb particulier car l'event provient du clavier
pas de l'UI...
--
Une Bévue

Avatar
unbewusst.sein
Une Bévue wrote:


ensuite si j'ai pour "keyupHandler" :
function keyupHandler(e){alert('keyupHandler');}

pas d'alerte ;-)


je continue à me répondre si jamais ça intéressait qq'1 d'autre.

donc j'ai remis document.addaddEventListener( "keyup", keyupHandler,
false );

et là le e.taget.nodeName est à "html"...

bon, MAIS mon problème est résolu quand même, dans mon constructeur de
slider j'ai donc un :
function mouseoverHandler(e){
_mouseover=true;
var node=e.target;
if(node.nodeName==='img'){node.src='slider/background_hover.png';}
document.addEventListener("keyup",keyupHandler,false);
//--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
}
^
c'est dans un fichier js à part.

dans le document (x)html, j'ai par ailleurs :
document.addEventListener("keyup",keydownColorHandler,false);

donc tout les deux sur 'keyup' et là il n'y a pas de conflit...
--
Une Bévue