Javascript 事件流和事件绑定(3)

在我们的支持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;
    }
  }
}

示例（4）：

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

静态页访问地址：(如果你也想体验下我的“惊喜”，请用IE6访问，点击第一个示例链接，但千万不要用Firefox，否则会挂掉，别说我没有提醒你！！！)

您可能感兴趣的文章: