ambar/closure_listen_event_bug.md

## closure_listen_event_bug.md

      
    Raw
  

              closure_listen_event_bug.md
            
          
    goog.events.listen bug

来源

原始代码：
// closure_library_path/closure/goog/events/events.js L222
// goog.events.listen = function(src, type, listener, opt_capt, opt_handler) {....
// Attach the proxy through the browser's API
if (src.addEventListener) {
  if (src == goog.global || !src.customEvent_) {
    src.addEventListener(type, proxy, capture);
  }
} else {
  src.attachEvent(goog.events.getOnString_(type), proxy);
}
Closure 在会检测要绑定事件的目标对象上的 customEvent_ 属性，此值为 true 时它表示目标对象不是 DOM 原生对象，而是一个 goog.events.EventTarget 实例，同时这个事件的可能是一个自定义的事件。
customEvent_ 属性来源：
// closure_library_path/closure/goog/events/eventtarget.js L72
/**
 * Used to tell if an event is a real event in goog.events.listen() so we don't
 * get listen() calling addEventListener() and vice-versa.
 * @type {boolean}
 * @private
 */
goog.events.EventTarget.prototype.customEvent_ = true;
原因

高级编译模式时，customEvent_ 被编译成了其他随机的短名称，比如有 pw、tw、Lx：
env 1:
if (a.addEventListener) {
    if (a == q || !a.pw)
        a.addEventListener(b, j, d)
}

env 2:
if (a.addEventListener) {
    if (a == q || !a.tw)
        a.addEventListener(b, j, d)
}

env 3:
if (a.addEventListener) {
    if (a == q || !a.Lx)
        a.addEventListener(b, j, d)
}

同时，如果有一个类似的表单，表单的 pw 属性为 input 元素，而 customEvent_ 也被编译成 pw 短名称，此时 goog.events.listen 绑定事件将失效，如：
<form id="myform">
    <input name="pw">
</form>
<script>
    var form = document.forms['myform']
    // input element
    console.log(form.pw)
    // failed to listen
    goog.events.listen(form, 'submit', fn)
</script>

避免

暂时想了两个办法：

修改源码

if (src == goog.global || src.customEvent_ !== true) {..}


或 input 使用足够长的 name 属性，不可靠。
更换 closure library 版本，跳过这个编译结果，不可靠.