Difference between pointer events binding in jQuery and plain Javascript -

i've been trying understand how different pointer events (touch, mouse) fired in various browsers/on various devices. on purposed have written tiny webpage testing events http://tstr.29pixels.net.

a few weeks later i've run mozilla's event listener test page @ http://mozilla.github.io/mozhacks/touch-events/event-listener.html, produced different results (i saw events fired wasn't showing in original test tool).

both websites use different style of binding events, i'd love know, difference in binding events?

for example, pick tablet / smartphone chrome , try clicking button on web. in cases 2 events fired - touchstart , touchend (with occasional touchmove). try mozilla's tool. there more (even including click).

my binding:

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

mozilla binding:

var events = ['mspointerdown', 'mspointerup', ... , 'mspointercancel']; var b = document.getelementbyid('button'); (var i=0; i<events.length; i++) {    b.addeventlistener(events[i], report, false); } 

these important parts, full javascript code written right in index page of both websites (it's not long).

if bring light matter me, i'd grateful.

jquery uses addeventlistener internally. depending on event there might mapping or internal tweaks done jquery.

but main difference between code , 1 of mozilla call e.preventdefault(); in callback method, mozilla not prevent default behavior event.

calling e.preventdefault(); not prevent default behavior result prevent other event occur. e.g. if prevent mousedown or mousemove no dragevent occur.