remove event delegation

Author: yyx990803

src/compiler.js

@@ -743,52 +743,6 @@ CompilerProto.parseDeps = function () {
     DepsParser.parse(this.computed)
 }
 
-/**
- *  Add an event listener to the delegator
- *  listeners are instances of directives with `isFn:true`
- */
-CompilerProto.addListener = function (listener) {
-    var event = listener.arg,
-        delegator = this.delegators[event] || this.addDelegator(event)
-    delegator.targets.push(listener)
-}
-
-/**
- *  Remove an event delegation listener
- */
-CompilerProto.removeListener = function (listener) {
-    var targets = this.delegators[listener.arg].targets
-    targets.splice(targets.indexOf(listener), 1)
-}
-
-/**
- *  Add an event delegator
- */
-CompilerProto.addDelegator = function (event) {
-    var delegator = this.delegators[event] = {
-        targets: [],
-        handler: function (e) {
-            var target,
-                i = delegator.targets.length,
-                stop = e.stopPropagation
-            // overwrite propagation control
-            e.stopPropagation = function () {
-                e.stopped = true
-                stop.call(e)
-            }
-            while (i--) {
-                target = delegator.targets[i]
-                if (!e.stopped && target.handler && target.el.contains(e.target)) {
-                    target.handler(e)
-                }
-            }
-        }
-    }
-    // useCapture:true so e.preventDefault() works
-    this.el.addEventListener(event, delegator.handler, true)
-    return delegator
-}
-
 /**
  *  Do a one-time eval of a string that potentially
  *  includes bindings. It accepts additional raw data

src/directives/on.js

@@ -1,52 +1,33 @@
-var utils    = require('../utils'),
-    noBubble = ['blur', 'focus', 'load']
+var utils    = require('../utils')
 
 module.exports = {
 
     isFn: true,
 
     bind: function () {
-        // blur and focus events do not bubble
-        // so they can't be delegated
-        this.bubbles = noBubble.indexOf(this.arg) === -1
-        if (this.bubbles) {
-            this.binding.compiler.addListener(this)
-        }
+        this.context = this.binding.isExp
+            ? this.vm
+            : this.binding.compiler.vm
     },
 
     update: function (handler) {
         if (typeof handler !== 'function') {
             utils.warn('Directive "on" expects a function value.')
             return
         }
-        var el       = this.el,
-            targetVM = this.vm,
-            context  = this.binding.isExp
-                ? targetVM
-                : this.binding.compiler.vm,
-            newHandler = function (e) {
-                e.delegationTarget = el
-                e.targetVM = targetVM
-                context.$event = e
-                handler.call(context, e)
-                context.$event = null
-            }
-        if (!this.bubbles) {
-            this.reset()
-            this.el.addEventListener(this.arg, newHandler)
+        this._unbind()
+        var vm = this.vm,
+            context = this.context
+        this.handler = function (e) {
+            e.targetVM = vm
+            context.$event = e
+            handler.call(context, e)
+            context.$event = null
         }
-        this.handler = newHandler
+        this.el.addEventListener(this.arg, this.handler)
     },
 
-    reset: function () {
-        this.el.removeEventListener(this.arg, this.handler)
-    },
-    
     unbind: function () {
-        if (this.bubbles) {
-            this.binding.compiler.removeListener(this)
-        } else {
-            this.reset()
-        }
+        this.el.removeEventListener(this.arg, this.handler)
     }
 }

test/unit/specs/directives.js

@@ -417,6 +417,7 @@ describe('Directives', function () {
 
         var dir = mockDirective('on')
         dir.arg = 'click'
+        dir.bind()
 
         before(function () {
             document.body.appendChild(dir.el)
@@ -431,15 +432,18 @@ describe('Directives', function () {
             assert.ok(triggered)
         })
 
-        it('delegation should work', function () {
-            var triggered = false,
-                child = document.createElement('div')
-            dir.el.appendChild(child)
+        it('should remove previous handler when update() a new handler', function () {
+            var triggered1 = false,
+                triggered2 = false
             dir.update(function () {
-                triggered = true
+                triggered1 = true
             })
-            child.dispatchEvent(mockMouseEvent('click'))
-            assert.ok(triggered)
+            dir.update(function () {
+                triggered2 = true
+            })
+            dir.el.dispatchEvent(mockMouseEvent('click'))
+            assert.notOk(triggered1)
+            assert.ok(triggered2)
         })
 
         it('should wrap the handler to supply expected args', function () {
@@ -449,27 +453,13 @@ describe('Directives', function () {
             dir.update(function (ev) {
                 assert.strictEqual(this, vm, 'handler should be called on owner VM')
                 assert.strictEqual(ev, e, 'event should be passed in')
-                assert.strictEqual(ev.vm, dir.vm)
+                assert.strictEqual(ev.targetVM, dir.vm)
                 triggered = true
             })
             dir.el.dispatchEvent(e)
             assert.ok(triggered)
         })
 
-        it('should remove previous handler when update() a new handler', function () {
-            var triggered1 = false,
-                triggered2 = false
-            dir.update(function () {
-                triggered1 = true
-            })
-            dir.update(function () {
-                triggered2 = true
-            })
-            dir.el.dispatchEvent(mockMouseEvent('click'))
-            assert.notOk(triggered1)
-            assert.ok(triggered2)
-        })
-
         it('should remove the handler in unbind()', function () {
             var triggered = false
             dir.update(function () {
@@ -480,29 +470,6 @@ describe('Directives', function () {
             assert.notOk(triggered)
         })
 
-        it('should not use delegation if the event is blur or focus', function () {
-            var dir = mockDirective('on', 'input'),
-                triggerCount = 0,
-                handler = function () {
-                    triggerCount++
-                }
-
-            document.body.appendChild(dir.el)
-
-            dir.arg = 'focus'
-            dir.update(handler)
-            dir.el.dispatchEvent(mockHTMLEvent('focus'))
-            assert.strictEqual(triggerCount, 1)
-
-            dir.arg = 'blur'
-            dir.update(handler)
-            dir.el.dispatchEvent(mockHTMLEvent('blur'))
-            assert.strictEqual(triggerCount, 2)
-
-            document.body.removeChild(dir.el)
-
-        })
-
         after(function () {
             document.body.removeChild(dir.el)
         })
@@ -1043,6 +1010,8 @@ function mockDirective (dirName, tag, type) {
     } else {
         for (var key in dir) {
             ret[key] = dir[key]
+            ret._update = dir.update
+            ret._unbind = dir.unbind
         }
     }
     if (tag === 'input') ret.el.type = type || 'text'