IE和其他浏览器下这里的this为什么不同

Question

    // IE
    <button id = "box" name = "box">Click Me!</button>

    <script>
        var name = "window";

        function showName(){
            alert(this.name);
        }

        document.getElementById("box").attachEvent("onclick", showName);// 点击后弹出的是'window'
    </script>
    
    // 其他浏览器
    <button id = "box" name = "box">Click Me!</button>

    <script>
        var name = "window";

        function showName(){
            alert(this.name);
        }

        document.getElementById("box").addEventListener("click", showName, false);// 点击后弹出的是'box'
    </script>

this的指向不就是调用该函数的对象么，那么按照常规showName当中的this就是指向button对象了，this.name应该弹出'box'，为什么IE下弹出的是window，直接调用showName()才应该是'window'啊，这是不是和attachEvent函数绑定函数的方式有关呢？有什么解决方法？

Answer 1

这个就是IE的attache的实现问题了
IE就是这个样子的啦，默认情况下this指向window对象
解决方法:

function showName(event){
    var _event=window.event||arguments[0];
    var _this_=_event.target;
    alert(_this_);
}

或这样也可以

var boxDOM=document.getElementById("box")
boxDOM.attachEvent("onclick", function(){
    showName.apply(boxDOM,arguments.slice(0));
});

Answer 2

题主，你确定你第二段代码弹出的是box？
你再试试。

这样：

function showName(){
    (function(){
        alert(this.name);
    })();
}

弹出的肯定还是window啊，你应该把那个匿名函数去掉。

至于原因是这样的：

• attachEvent调用回调函数的时候是这样的：showName();或者showName.call(undefined);

• addEventListener调用回调函数的时候是这样的：showName.call(sourceElement);

这样你就明白了。