Differenza tra gli eventi del puntatore che si legano in jQuery e plain Javascript

Question

Ho cercato di capire come diversi eventi del puntatore (tocco, mouse) vengono attivati ​​in vari browser/su vari dispositivi. A tal proposito ho scritto una piccola pagina web per testare gli eventi http://tstr.29pixels.net.

Alcune settimane più tardi mi sono imbattuto nella pagina di test degli ascoltatori di eventi di Mozilla allo http://mozilla.github.io/mozhacks/touch-events/event-listener.html, che ha prodotto risultati molto diversi (ho visto eventi che non venivano visualizzati nel mio strumento di test originale).

Entrambi i siti Web utilizzano uno stile diverso di eventi vincolanti, quindi mi piacerebbe sapere, qual è la differenza nell'associazione di questi eventi?

Ad esempio, prendi il tuo tablet/smartphone con Chrome e prova a fare clic sul pulsante sul mio web. Nella maggior parte dei casi vengono attivati ​​due eventi: touchstart e touchend (con un tocco occasionale). Quindi prova lo strumento di Mozilla. C'è molto di più (incluso anche il clic).

mio vincolante: vincolante

$("#button").on('mouseenter mouseleave ... mousemove click', function(e){ 
    ... 
} 

Mozilla:

var events = ['MSPointerDown', 'MSPointerUp', ... , 'MSPointerCancel']; 
var b = document.getElementById('button'); 
for (var i=0; i<events.length; i++) { 
    b.addEventListener(events[i], report, false); 
} 

Queste sono solo le parti più importanti, completa di codice javascript è scritto a destra nella pagina di indice di entrambi i siti (non è lungo).

Se qualcuno potesse portare un po 'di luce in questa faccenda per me, sarei molto grato.

Answer 1

jQuery utilizza anche addEventListener internamente. A seconda dell'evento potrebbero esserci alcune mappature o modifiche interne eseguite da jQuery.

Ma la differenza principale tra il tuo codice e quello di Mozilla è che chiami il e.preventDefault(); nel tuo metodo di callback, ma Mozilla non impedisce il comportamento predefinito per l'evento.

La chiamata al numero e.preventDefault(); non solo previene il comportamento predefinito ma, di conseguenza, impedirà anche l'esecuzione di determinati altri eventi. per esempio. se si impedisce mousedown o mousemove non si verificherà l'evento drag.

Answer 2

Non c'è molta differenza nel modo in cui gli eventi sono registrati con il browser.

Tuttavia, Mozilla lega semplicemente il gestore ad eventi che non si ascoltano. Specificamente, questi sono:

MSGotPointerCapture MSLostPointerCapture MSPointerCancel 
blur focus 
gotpointercapture lostpointercapture pointercancel 
mousedown mouseup 
mouseout 
mouseover 
touchenter touchleave