javascript 跨浏览器的事件系统4

上次说到我们在无菌环境中设计了一个事件代理函数，但性能是个问题，解决它我们需要缓存节点集合，发现节点集合不足以应对新情况时，再替换这个节点集合，重新开始匹配。下面是新的方案：

var delegate = function(selector,type,callback){ 

  var els = $(selector); 

  addEvent(document,type,function(e){ 

    var flag = true; 

    var node = e.srcElement || e.target; 

    for(var i=0,el;el = els[i++];){ 

      if(node === el){ 

        flag = false; 

        return callback.call(node,e); 

      } 

    } 

    if(flag){ 

      els = $(selector); 

      for(var i=0,el;el = els[i++];){ 

        if(node === el){ 

          return callback.call(node,e); 

        } 

      } 

    } 

  },true); 

}

<!doctype html>
<html lang="zh-ch" id="html">
  <head>
    <meta charset="utf-8" />
    <meta content="IE=8" http-equiv="X-UA-Compatible"/>
    <title>事件代理 by 司徒正美</title>

</body>
</html>

好了，我们现在来考虑另一种情况。之前我们的判定都是用全等于来比较，但如果事件源是来自更底层的元素呢？换言之，是下面的情况。

<div onclick="alert('outer')" id="outer"> 

  <div onclick="alert('middle')" id="middle"> 

    <div onclick="alert('inner')" id="inner"></div> 

  </div> 

</div>

当我们点击inner元素时，它上面的middle与outer的onclick也触发，因此我们必须引入包含判定了。这里我直接给出答案，具体可见我的这一篇博文。

var  contains = function(el, root) { 

  if (el.compareDocumentPosition) 

    return (el.compareDocumentPosition(root) & 8) === 8; 

  if (root.contains && el.nodeType === 1){ 

    return root.contains(el) && root !== el; 

  } 

  while ((el = el.parentNode)) 

    if (el === root) return true; 

  return false; 

} 

var delegate = function(selector,type,callback){ 

  var els = $(selector); 

  addEvent(document,type,function(e){ 

    var flag = true; 

    var src = e.srcElement || e.target; 

    for(var i=0,el;el = els[i++];){ 

      if(el === src || contains(src,el) ){ 

        flag = false; 

        return callback.call(el,e); 

      } 

    } 

    if(flag){ 

      els = $(selector); 

      for(var i=0,el;el = els[i++];){ 

        if(el === src || contains(src,el) ){ 

          return callback.call(el,e); 

        } 

      } 

    } 

  },true); 

}

<!doctype html>
<html lang="zh-ch" id="html">
  <head>
    <meta charset="utf-8" />
    <meta content="IE=8" http-equiv="X-UA-Compatible"/>
    <title>事件代理 by 司徒正美</title>

我们再把筛选事件源的逻辑独立出来，就变成下面这个样子。是时候考虑如第一部分设计的事件系统衔接起来了！

var handle = function(e,obj){ 

  var flag = true,  

  src = e.srcElement || e.target, 

  els = obj.nodes; 

  for(var i=0,el;el = els[i++];){ 

    if(el === src || contains(src,el) ){ 

      flag = false; 

      return obj.callback.call(el,e); 

    } 

  } 

  if(flag){ 

    els = obj.nodes = $(obj.selector); 

    for(var i=0,el;el = els[i++];){ 

      if(el === src || contains(src,el) ){ 

        return obj.callback.call(el,e); 

      } 

    } 

  } 

} 

var delegate = function(selector,type,callback){ 

  var handleObj = {}; 

  handleObj.callback = callback; 

  handleObj.selector = selector; 

  handleObj.nodes = $(selector); 

  addEvent(document,type,function(e){ 

    handle(e,handleObj) 

  },true); 

}

顶

Top

关注