9.3. 事件绑定

前面花了大量的篇幅介绍了模板上的事件标记在构建AST树上是怎么处理，并且如何根据构建的AST树返回正确的render渲染函数，但是真正事件绑定还是离不开绑定注册事件。这一个阶段就是发生在组件挂载的阶段。有了render函数，自然可以生成实例挂载需要的Vnode树，并且会进行patchVnode的环节进行真实节点的构建，如果发现过程已经遗忘，可以回顾以往章节。Vnode树的构建过程和之前介绍的内容没有明显的区别，所以这个过程就不做赘述，最终生成的vnode如下：

9.3. 事件绑定 - 图1

有了Vnode,接下来会遍历子节点递归调用createElm为每个子节点创建真实的DOM,由于Vnode中有data属性，在创建真实DOM时会进行注册相关钩子的过程，其中一个就是注册事件相关处理。

  1. function createElm() {
  2.   ···
  3.   // 针对指令的处理
  4.    if (isDef(data)) {
  5.       invokeCreateHooks(vnode, insertedVnodeQueue);
  6.     }
  7. }
  10. function invokeCreateHooks (vnode, insertedVnodeQueue) {
  11.   for (var i$1 = 0; i$1 < cbs.create.length; ++i$1) {
  12.     cbs.create[i$1](emptyNode, vnode);
  13.   }
  14.   i = vnode.data.hook; // Reuse variable
  15.   if (isDef(i)) {
  16.     if (isDef(i.create)) { i.create(emptyNode, vnode); }
  17.     if (isDef(i.insert)) { insertedVnodeQueue.push(vnode); }
  18.   }
  19. }
  21. var events = {
  22.   create: updateDOMListeners,
  23.   update: updateDOMListeners
  24. };

我们经常会在template模板中定义v-on事件，v-bind动态属性，v-text动态指令等，和v-on事件指令一样，他们都会在编译阶段和Vnode生成阶段创建data属性，因此invokeCreateHooks就是一个模板指令处理的任务，他分别针对不同的指令为真实阶段创建不同的任务。针对事件，这里会调用updateDOMListeners对真实的DOM节点注册事件任务。

  1. function updateDOMListeners (oldVnode, vnode) {
  2.   // on是事件指令的标志
  3.   if (isUndef(oldVnode.data.on) && isUndef(vnode.data.on)) {
  4.     return
  5.   }
  6.   // 新旧节点不同的事件绑定解绑
  7.   var on = vnode.data.on || {};
  8.   var oldOn = oldVnode.data.on || {};
  9.   // 拿到需要添加事件的真实DOM节点
  10.   target$1 = vnode.elm;
  11.   // normalizeEvents是对事件兼容性的处理
  12.   normalizeEvents(on);
  13.   updateListeners(on, oldOn, add$1, remove$2, createOnceHandler$1, vnode.context);
  14.   target$1 = undefined;
  15. }

其中normalizeEvents是针对v-model的处理,例如在IE下不支持change事件，只能用input事件代替。

updateListeners的逻辑也很简单，它会遍历on事件对新节点事件绑定注册事件，对旧节点移除事件监听，它即要处理原生DOM事件的添加和移除，也要处理自定义事件的添加和移除，关于自定义事件，后续内容再分析。

  1. function updateListeners (on,oldOn,add,remove###1,createOnceHandler,vm) {
  2.     var name, def###1, cur, old, event;
  3.     // 遍历事件
  4.     for (name in on) {
  5.       def###1 = cur = on[name];
  6.       old = oldOn[name];
  7.       event = normalizeEvent(name);
  8.       if (isUndef(cur)) {
  9.         // 事件名非法的报错处理
  10.         warn(
  11.           "Invalid handler for event \"" + (event.name) + "\": got " + String(cur),
  12.           vm
  13.         );
  14.       } else if (isUndef(old)) {
  15.         // 旧节点不存在
  16.         if (isUndef(cur.fns)) {
  17.           // createFunInvoker返回事件最终执行的回调函数
  18.           cur = on[name] = createFnInvoker(cur, vm);
  19.         }
  20.         // 只触发一次的事件
  21.         if (isTrue(event.once)) {
  22.           cur = on[name] = createOnceHandler(event.name, cur, event.capture);
  23.         }
  24.         // 执行真正注册事件的执行函数
  25.         add(event.name, cur, event.capture, event.passive, event.params);
  26.       } else if (cur !== old) {
  27.         old.fns = cur;
  28.         on[name] = old;
  29.       }
  30.     }
  31.     // 旧节点存在，接触旧节点上的绑定事件
  32.     for (name in oldOn) {
  33.       if (isUndef(on[name])) {
  34.         event = normalizeEvent(name);
  35.         remove###1(event.name, oldOn[name], event.capture);
  36.       }
  37.     }
  38.   }

在初始构建实例时，旧节点是不存在的,此时会调用createFnInvoker函数对事件回调函数做一层封装，由于单个事件的回调可以有多个，因此createFnInvoker的作用是对单个，多个回调事件统一封装处理，返回一个当事件触发时真正执行的匿名函数。

  1. function createFnInvoker (fns, vm) {
  2.   // 当事件触发时，执行invoker方法，方法执行fns
  3.   function invoker () {
  4.     var arguments$1 = arguments;
  6.     var fns = invoker.fns;
  7.     // fns是多个回调函数组成的数组
  8.     if (Array.isArray(fns)) {
  9.       var cloned = fns.slice();
  10.       for (var i = 0; i < cloned.length; i++) {
  11.         // 遍历执行真正的回调函数
  12.         invokeWithErrorHandling(cloned[i], null, arguments$1, vm, "v-on handler");
  13.       }
  14.     } else {
  15.       // return handler return value for single handlers
  16.       return invokeWithErrorHandling(fns, null, arguments, vm, "v-on handler")
  17.     }
  18.   }
  19.   invoker.fns = fns;
  20.   // 返回最终事件执行的回调函数
  21.   return invoker
  22. }

其中invokeWithErrorHandling会执行定义好的回调函数，这里做了同步异步回调的错误处理。try-catch用于同步回调捕获异常错误，Promise.catch用于捕获异步任务返回错误。

  1. function invokeWithErrorHandling (handler,context,args,vm,info) {
  2.     var res;
  3.     try {
  4.       res = args ? handler.apply(context, args) : handler.call(context);
  5.       if (res && !res._isVue && isPromise(res)) {
  6.         // issue #9511
  7.         // reassign to res to avoid catch triggering multiple times when nested calls
  8.         // 当生命周期钩子函数内部执行返回promise对象是，如果捕获异常，则会对异常信息做一层包装返回
  9.         res = res.catch(function (e) { return handleError(e, vm, info + " (Promise/async)"); });
  10.       }
  11.     } catch (e) {
  12.       handleError(e, vm, info);
  13.     }
  14.     return res
  15.   }

如果事件只触发一次(即使用了once修饰符)，则调用createOnceHandler匿名，在执行完回调之后，移除事件绑定。

  1. function createOnceHandler (event, handler, capture) {
  2.     var _target = target$1; 
  3.     return function onceHandler () {
  4.       //调用事件回调
  5.       var res = handler.apply(null, arguments);
  6.       if (res !== null) {
  7.         // 移除事件绑定
  8.         remove$2(event, onceHandler, capture, _target);
  9.       }
  10.     }
  11.   }

add和remove是真正在DOM上绑定事件和解绑事件的过程，它的实现也是利用了原生DOM的addEventListener,removeEventListener api。

  1. function add (name,handler,capture,passive){
  2.   ···
  3.   target$1.addEventListener(name,handler,
  4.       supportsPassive
  5.         ? { capture: capture, passive: passive }
  6.         : capture);
  7. }
  8. function remove (name,handler,capture,_target) {
  9.   (_target || target$1).removeEventListener(
  10.     name,
  11.     handler._wrapper || handler,
  12.     capture
  13.   );
  14. }

另外事件的解绑除了发生在只触发一次的事件，也发生在组件更新patchVnode过程，具体不展开分析，可以参考之前介绍组件更新的内容研究updateListeners的过程。