Comment transférer la propriété 'devicemotion' en JavaScript?

Question

J'ai un élément DOM (dans certains cas plusieurs) que je veux déplacer (en changeant le css) quand le périphérique se déplace.

Maintenant, je me demande pourquoi cela ne fonctionne pas:

var aDOMElement = document.getElementById("someId"); 
aDOMElement.DeviceMotionEvent = window.DeviceMotionEvent; 
aDOMElement.addEventListener('devicemotion', motionHandler, false); 

Je considère une solution de contournement à travailler juste avec l'objet window et dans le rappel que je gère les mouvements de tous les objets qui sont stockés dans un tableau .

Un peu comme ceci:

function motionHandler(event) { 
    for (var obj in objectList) { 
     obj.move(event); 
    } 
} 

Cependant, pour une raison étrange, la fonction move j'affecté à l'objet avant de le ranger dans la liste est undefined. Les explications et/ou solutions pour cela sont les bienvenues.

EDIT:

Voici comment créer et ajouter l'objet au tableau:

var objectList = []; 

var elem = document.createElement("div"); 
//add some properties 
elem.id = "someId"; 
elem.move = specificMoveFunction; 
//add it to the list 
objectList[elem.id] = elem; 

Answer 1

Tout simplement parce que vous attribuez une propriété DeviceMotionEvent à un élément DOM ne veut pas dire qu'il va être déclenché ... Vous devez connecter l'écouteur d'événement sur la fenêtre (où il est déclenché) à l'écouteur (s) d'événement sur les éléments DOM et les déclencher manuellement. Vous feriez mieux d'écouter l'événement window et de faire votre manipulation DOM ici.

par exemple.

window.addEventListener('devicemotion', function(event) { 
    var domElements = document.getElementsByClassName('could-move'); 
    for (i=0;i<elements.length;i++) { 
    elements[i].classList.add("moved"); 
    } 
}); 

où votre code HTML avant ressemblerait à ceci:

<span class="could-move">span 1</span> 
<span class="could-move">span 2</span> 

et après ressembleraient

<span class="could-move moved">span 1</span> 
<span class="could-move moved">span 2</span> 

EDIT:

En fait, pourquoi avez-vous besoin de le mettre de window sur l'élément DOM? pouvez-vous pas juste aDOMElement.addEventListener('devicemotion', motionHandler, false); sans aDOMElement.DeviceMotionEvent = window.DeviceMotionEvent;? Les docs de MDN ne disent pas que ceci est seulement lancé sur la fenêtre. Tous les exemples montrent que l'événement est déclenché uniquement sur la fenêtre: http://www.html5rocks.com/en/tutorials/device/orientation/, donc je pense toujours que vous feriez mieux d'écouter seulement sur la fenêtre et de faire votre travail là-bas.