feat(lib/core): add/removeEventListener hooks

Matthew Hill · vicb · commit 18974403845a · 2015-09-03T14:22:39.000-07:00
diff --git a/README.md b/README.md
@@ -179,7 +179,7 @@ Transforms a function to run within the given zone.
 ### `zone.fork`
 
 ```javascript
-zone.fork({
+var myZone = zone.fork({
   onZoneCreated: function () {},
   beforeTask: function () {},
   afterTask: function () {},
@@ -190,7 +190,6 @@ zone.fork({
   setInterval: function () {},
   alert: function () {},
   prompt: function () {},
-  addEventListener: function () {}
 });
 myZone.run(function () {
   // woo!
@@ -242,7 +241,51 @@ growing the stack size on each recursive call.
 
 ### `zone.addEventListener`
 
-This hook allows you to intercept calls to `EventTarget.addEventListener`.
+This hook allows you to intercept calls to `EventTarget#addEventListener`.
+
+````javascript
+var clickListenerCount = 0;
+
+zone.fork(
+  $addEventListener: function(parentAddEventListener) {
+    return function (type, listener) {
+      if (type === 'click') clickListenerCount++;
+      return parentAddEventListener.apply(this, arguments);
+    };
+  }
+);
+
+zone.run(function() {
+  myElement.addEventListener('click', listener);
+  myOtherElement.addEventListener('click', listener);
+
+  console.log(clickListenerCount); // 2
+});
+````
+
+### `zone.removeEventListener`
+
+This hook allows you to intercept calls to `EventTarget#removeEventListener`.
+
+````javascript
+var clickListenerCount = 0;
+
+zone.fork(
+  $removeEventListener: function(parentRemoveEventListener) {
+    return function (type, listener) {
+      if (type === 'click') clickListenerCount--;
+      return parentRemoveEventListener.apply(this, arguments);
+    };
+  }
+);
+
+zone.run(function() {
+  myElement.addEventListener('click', listener);
+  myElement.removeEventListener('click', listener);
+
+  console.log(clickListenerCount); // 0
+});
+````
 
 
 ## Status
diff --git a/lib/core.js b/lib/core.js
@@ -119,7 +119,13 @@ Zone.prototype = {
   onZoneCreated: function () {},
   afterTask: function () {},
   enqueueTask: function () {},
-  dequeueTask: function () {}
+  dequeueTask: function () {},
+  addEventListener: function () {
+    return this._addEventListener.apply(this, arguments);
+  },
+  removeEventListener: function () {
+    return this._removeEventListener.apply(this, arguments);
+  }
 };
 
 // Root zone ID === 1
diff --git a/lib/utils.js b/lib/utils.js
@@ -89,7 +89,8 @@ function patchProperties(obj, properties) {
 };
 
 function patchEventTargetMethods(obj) {
-  var addDelegate = obj.addEventListener;
+  // This is required for the addEventListener hook on the root zone.
+  obj._addEventListener = obj.addEventListener;
   obj.addEventListener = function (eventName, handler) {
     var fn;
     //Ignore special listeners of IE11 & Edge dev tools, see https://github.com/angular/zone.js/issues/150
@@ -110,18 +111,19 @@ function patchEventTargetMethods(obj) {
       handler._bound = handler._bound || {};
       arguments[1] = handler._bound[eventName] = zone.bind(fn);
     }
-    return addDelegate.apply(this, arguments);
+    return global.zone.addEventListener.apply(this, arguments);
   };
 
-  var removeDelegate = obj.removeEventListener;
+  // This is required for the removeEventListener hook on the root zone.
+  obj._removeEventListener = obj.removeEventListener;
   obj.removeEventListener = function (eventName, handler) {
     if(handler._bound && handler._bound[eventName]) {
       var _bound = handler._bound;
       
       arguments[1] = _bound[eventName];
       delete _bound[eventName];
     }
-    var result = removeDelegate.apply(this, arguments);
+    var result = global.zone.removeEventListener.apply(this, arguments);
     global.zone.dequeueTask(handler._fn);
     return result;
   };
diff --git a/test/zone.spec.js b/test/zone.spec.js
@@ -105,6 +105,69 @@ describe('Zone', function () {
 
       expect(spy).toHaveBeenCalled();
     });
+
+    describe('eventListener hooks', function () {
+      var button;
+      var clickEvent;
+
+      beforeEach(function () {
+        button = document.createElement('button');
+        clickEvent = document.createEvent('Event');
+        clickEvent.initEvent('click', true, true);
+        document.body.appendChild(button);
+      });
+
+      afterEach(function () {
+        document.body.removeChild(button);
+      });
+
+      it('should support addEventListener', function () {
+        var hookSpy = jasmine.createSpy();
+        var eventListenerSpy = jasmine.createSpy();
+        var zone = rootZone.fork({
+          $addEventListener: function(parentAddEventListener) {
+            return function (type, listener) {
+              return parentAddEventListener.call(this, type, function() {
+                hookSpy();
+                listener.apply(this, arguments);
+              });
+            }
+          }
+        });
+
+        zone.run(function() {
+          button.addEventListener('click', eventListenerSpy);
+        });
+        
+        button.dispatchEvent(clickEvent);
+
+        expect(hookSpy).toHaveBeenCalled();
+        expect(eventListenerSpy).toHaveBeenCalled();
+      });
+
+      it('should support removeEventListener', function () {
+        var hookSpy = jasmine.createSpy();
+        var eventListenerSpy = jasmine.createSpy();
+        var zone = rootZone.fork({
+          $removeEventListener: function(parentRemoveEventListener) {
+            return function (type, listener) {
+              hookSpy();
+              return parentRemoveEventListener.call(this, type, listener);
+            }
+          }
+        });
+
+        zone.run(function() {
+          button.addEventListener('click', eventListenerSpy);
+          button.removeEventListener('click', eventListenerSpy);
+        });
+
+        button.dispatchEvent(clickEvent);
+
+        expect(hookSpy).toHaveBeenCalled();
+        expect(eventListenerSpy).not.toHaveBeenCalled();
+      });
+    });
   });
 
 
