浅谈Javascript中的事件流和事件绑定（3）

What is ‘this’?

IE在前面给了我“惊喜”，this也给我惊喜。当然主要是我以前没有注意到，但是YAHOO的工程师们早以发现了。this这个关键字是根据上下文来决定的，在我们的事件绑定的功能函数里，this应该是指向当前的元素节点对象，应该是一个Element对象。我想这个大家应该好理解：

示例代码：

<span id="cnt0">
     <a href=”#1″ id=”link0″>点击我触发捕获型事件流</a>
</span>

<script type=”text/javascript”>
var link = document.getElementById(’link1′);
     link.onclick = function(){
          alert(this.tagName);
     };
</script>

这段代码正式我在示例（1）中的处理方式，示例中this指向的a标签这个element对象，所以我们可以得到a标签的tagName这个属性‘A’。示例（2）里，我使用一个兼容的事件监听函数：

function addListener(el, event, fn, bCapture){
  var isCapture = bCapture ? bCapture : false;
  try {
    el.addEventListener(event, fn, isCapture);
  }
  catch (e) {
    try {
      el.attachEvent(’on’ + event, fn);
    }
    catch (e) {
      el['on' + event] = fn;
    }
  }
}

在我们的支持DOM事件流的浏览器里，我们也可以得到正确的提示this.tagName为‘A’。this出现问题就在IE中，当我们使用attachEvent给元素绑定事件，现在你点击下面的链接：

示例（3）

示例代码：
<span id=”cnt2″>
    <a href=”#1″ id=”link2″>What is ‘this’?</a>
</span>

function whatIsThis(){
    if (this === window) {
        alert(’This is a window object’);
    }
    alert(’So, This.tagName is:’+ ‘‘’+ this.tagName +’’。’);
}

<script type=”text/javascript”>
var cntThree = document.getElementById(’cnt2′), lnkThree = document.getElementById(’link2′);

addListener(lnkThree, ‘click’, whatIsThis);
addListener(cntThree, ‘click’, whatIsThis);
</script>

看清楚了吗？如果你在IE6~8中测试，那么你点的是window对象而不是一个a标签。晕倒！！！-_-! 所以你要小心，问题多多啊，要解决这个this关键字的问题，我给你的建议就是你可以考虑直接用传统的’onclick’或者修改下前面的绑定事件监听的函数：

修改后的代码：

function addEvent(el, event, fn, obj, overrideContext, bCapture){
  var context = el, isCapture = bCapture ? bCapture : false, wrappedFn = null;

  if (overrideContext) {
    if (overrideContext === true) {
      context = obj;
    }
    else {
      context = overrideContext;
    }
  }
  wrappedFn = function(){
    return fn.call(context);
  };
  try {
    el.addEventListener(event, wrappedFn, isCapture);
  }
  catch (e) {
    try {
      el.attachEvent(’on’ + event, wrappedFn);
    }
    catch (e) {
      el['on' + event] = wrappedFn;
    }
  }
}

好了就这么多了，不知道对你有没有帮助，最后说明下，本文中的部分观点参考至《Javascript高级程序设计》（很好的一本书，推荐大家看看！），addEvent函数借鉴了YUI2.7的_addListener方法，这里也要谢谢YUI那些牛人，向他们致敬！

演示：http://www.yaohaixiao.com/my/event/index.html

(请用IE6访问，点击第一个示例链接，但千万不要用Firefox，否则会挂掉)