Version: 1.4 – Update to delegated events (Issue #5)

docs/index.html

@@ -272,7 +272,7 @@ <h5>*Unload Session Data Simulated on Each Interaction</h5>
         <script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
         <!-- Include interactor.min.js -->
         <script type="application/javascript">
-            var Interactor=function(a){this.__init__(a)};Interactor.prototype={__init__:function(a){var b=this;return b.interactions="boolean"!=typeof a.interactions||a.interactions,b.interactionElement="string"==typeof a.interactionElement?a.interactionElement:"interaction",b.interactionEvents=Array.isArray(a.interactionEvents)===!0?a.interactionEvents:["mouseup","touchend"],b.conversions="boolean"!=typeof a.conversions||a.conversions,b.conversionElement="string"==typeof a.conversionElement?a.conversionElement:"conversion",b.conversionEvents=Array.isArray(a.conversionEvents)===!0?a.conversionEvents:["mouseup","touchend"],b.endpoint="string"==typeof a.endpoint?a.endpoint:"/interactions",b.async="boolean"!=typeof a.async||a.async,b.debug="boolean"!=typeof a.debug||a.debug,b.records=[],b.session={},b.loadTime=new Date,b.__initializeSession__(),b.__bindEvents__(),b},__bindEvents__:function(){var a=this;if(a.interactions===!0)for(var b=0;b<a.interactionEvents.length;b++)for(var c=a.interactionEvents[b],d=document.getElementsByClassName(a.interactionElement),e=0;e<d.length;e++)d[e].addEventListener(c,function(b){b.stopPropagation(),a.__addInteraction__(b,"interaction")});if(a.conversions===!0)for(var b=0;b<a.conversionEvents.length;b++)for(var c=a.conversionEvents[b],d=document.getElementsByClassName(a.conversionElement),e=0;e<d.length;e++)d[e].addEventListener(c,function(b){b.stopPropagation(),a.__addInteraction__(b,"conversion")});return window.onbeforeunload=function(b){a.__sendInteractions__()},a},__addInteraction__:function(a,b){var c=this,d={type:b,event:a.type,targetTag:a.target.nodeName,targetClasses:a.target.className,content:a.target.innerText,clientPosition:{x:a.clientX,y:a.clientY},screenPosition:{x:a.screenX,y:a.screenY},createdAt:new Date};return c.records.push(d),c.debug&&(c.__closeSession__(),console.log("Session:\n",c.session)),c},__initializeSession__:function(){var a=this;return a.session={loadTime:a.loadTime,unloadTime:new Date,language:window.navigator.language,platform:window.navigator.platform,port:window.location.port,clientStart:{name:window.navigator.appVersion,innerWidth:window.innerWidth,innerHeight:window.innerHeight,outerWidth:window.outerWidth,outerHeight:window.outerHeight},page:{location:window.location.pathname,href:window.location.href,origin:window.location.origin,title:document.title},endpoint:a.endpoint},a},__closeSession__:function(){var a=this;return a.session.unloadTime=new Date,a.session.interactions=a.records,a.session.clientEnd={name:window.navigator.appVersion,innerWidth:window.innerWidth,innerHeight:window.innerHeight,outerWidth:window.outerWidth,outerHeight:window.outerHeight},a},__sendInteractions__:function(){var a=this,b=new XMLHttpRequest;return a.__closeSession__(),b.open("POST",a.endpoint,a.async),b.setRequestHeader("Content-Type","application/json; charset=UTF-8"),b.send(JSON.stringify(a.session)),a}};
+            var Interactor=function(n){this.__init__(n)};Interactor.prototype={__init__:function(n){var e=this;return e.interactions="boolean"!=typeof n.interactions||n.interactions,e.interactionElement="string"==typeof n.interactionElement?n.interactionElement:"interaction",e.interactionEvents=!0===Array.isArray(n.interactionEvents)?n.interactionEvents:["mouseup","touchend"],e.conversions="boolean"!=typeof n.conversions||n.conversions,e.conversionElement="string"==typeof n.conversionElement?n.conversionElement:"conversion",e.conversionEvents=!0===Array.isArray(n.conversionEvents)?n.conversionEvents:["mouseup","touchend"],e.endpoint="string"==typeof n.endpoint?n.endpoint:"/interactions",e.async="boolean"!=typeof n.async||n.async,e.debug="boolean"!=typeof n.debug||n.debug,e.records=[],e.session={},e.loadTime=new Date,e.__initializeSession__(),e.__bindEvents__(),e},__bindEvents__:function(){var n=this;if(!0===n.interactions)for(e=0;e<n.interactionEvents.length;e++)document.querySelector("body").addEventListener(n.interactionEvents[e],function(e){e.stopPropagation(),e.target.classList.value===n.interactionElement&&n.__addInteraction__(e,"interaction")});if(!0===n.conversions)for(var e=0;e<n.conversionEvents.length;e++)document.querySelector("body").addEventListener(n.conversionEvents[e],function(e){e.stopPropagation(),e.target.classList.value===n.conversionElement&&n.__addInteraction__(e,"conversion")});return window.onbeforeunload=function(e){n.__sendInteractions__()},n},__addInteraction__:function(n,e){var t=this,i={type:e,event:n.type,targetTag:n.target.nodeName,targetClasses:n.target.className,content:n.target.innerText,clientPosition:{x:n.clientX,y:n.clientY},screenPosition:{x:n.screenX,y:n.screenY},createdAt:new Date};return t.records.push(i),t.debug&&(t.__closeSession__(),console.log("Session:\n",t.session)),t},__initializeSession__:function(){var n=this;return n.session={loadTime:n.loadTime,unloadTime:new Date,language:window.navigator.language,platform:window.navigator.platform,port:window.location.port,clientStart:{name:window.navigator.appVersion,innerWidth:window.innerWidth,innerHeight:window.innerHeight,outerWidth:window.outerWidth,outerHeight:window.outerHeight},page:{location:window.location.pathname,href:window.location.href,origin:window.location.origin,title:document.title},endpoint:n.endpoint},n},__closeSession__:function(){var n=this;return n.session.unloadTime=new Date,n.session.interactions=n.records,n.session.clientEnd={name:window.navigator.appVersion,innerWidth:window.innerWidth,innerHeight:window.innerHeight,outerWidth:window.outerWidth,outerHeight:window.outerHeight},n},__sendInteractions__:function(){var n=this,e=new XMLHttpRequest;return n.__closeSession__(),e.open("POST",n.endpoint,n.async),e.setRequestHeader("Content-Type","application/json; charset=UTF-8"),e.send(JSON.stringify(n.session)),n}};
         </script>
         <!-- Demo Script -->
         <script>

interactor.js

@@ -68,28 +68,24 @@ Interactor.prototype = {
         // Set Interaction Capture
         if (interactor.interactions === true) {
             for (var i = 0; i < interactor.interactionEvents.length; i++) {
-                var ev      = interactor.interactionEvents[i],
-                    targets = document.getElementsByClassName(interactor.interactionElement);
-                for (var j = 0; j < targets.length; j++) {
-                    targets[j].addEventListener(ev, function (e) {
-                        e.stopPropagation();
+                document.querySelector('body').addEventListener(interactor.interactionEvents[i], function (e) {
+                    e.stopPropagation();
+                    if (e.target.classList.value === interactor.interactionElement) {
                         interactor.__addInteraction__(e, "interaction");
-                    });
-                }
+                    }
+                });
             }   
         }
 
         // Set Conversion Capture
         if (interactor.conversions === true) {
             for (var i = 0; i < interactor.conversionEvents.length; i++) {
-                var ev      = interactor.conversionEvents[i],
-                    targets = document.getElementsByClassName(interactor.conversionElement);
-                for (var j = 0; j < targets.length; j++) {
-                    targets[j].addEventListener(ev, function (e) {
-                        e.stopPropagation();
+                document.querySelector('body').addEventListener(interactor.conversionEvents[i], function (e) {
+                    e.stopPropagation();
+                    if (e.target.classList.value === interactor.conversionElement) {
                         interactor.__addInteraction__(e, "conversion");
-                    });
-                }
+                    }
+                });
             }   
         }