javascript - 事件函数中this指向-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 事件函数中this指向

欧阳克 2017-06-26 10:52:55

[JavaScript讨论组]

944

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    
    <h2 onmousedown = "f1(this)">事件中的this</h2>

    <script type="text/javascript">
        
        var h2 = document.getElementsByTagName('h2')[0];
        
        //HTML方式绑定
        function f1(obj){
            console.log(obj);
        }
        f1( this );
        
        /*
        //DOM 0级绑定方式
        h2.onclick = function(){
            console.log(this);
        }
        
        //DOM 2级方式
        h2.addEventListener('mouseover',function(){
            console.log(this);
        });
        */
    </script>
    

</body>
</html>

欧阳克

温故而知新，可以为师矣。博客：www.ouyangke.com

全部回复(6)

为情所困2017-06-26 10:54:55 6楼

javascript的this跟函数定义在哪里无关，跟谁调用它有关。

赞 +0

添加回复

高洛峰2017-06-26 10:54:55 5楼

h2那里因为是绑定在事件上的，因此 this 指向的是这个元素，你可以简单理解为是


var dom = document.getElementsByTagName('h2')
dom.onmousedown = function(){
    f1(this)
}

赞 +0

添加回复

代言2017-06-26 10:54:55 4楼

http://www.cnblogs.com/soulii...看看这个

赞 +0

添加回复

漂亮男人2017-06-26 10:54:55 3楼

前者相当于`请输入代码

var h2 = document.querySelectorAll("h2")[0];
function fn(){
    console.log(this);
}
h2.onmousedown = fn;
window.fn();

this指向调用它的对象，你定义在全局环境里的变量和函数默认是window对象下得属性和方法，所以当你在全局环境中执行fn()时this指向window

赞 +0

添加回复

代言2017-06-26 10:54:55 2楼

你获取到哪个dom，就是对应的this。

赞 +0

添加回复

PHP中文网2017-06-26 10:54:55 1楼

这两个不是一回事呀。

<h2 onmousedown="f1(this)"></h2>
h2.onmouseover=f1()
h2.addEventListern(f1)

这三种方式都是为h2绑定了一个mouseover事件发生时的名为f1回调函数,事件绑定的回调函数指向DOM元素本身。

你问题中的

//HTML方式绑定
function f1(obj){
  console.log(obj);
}
f1( this );

这段程序是在window作用域下运行的，this自然就指向window。这段代码跟h2无关了(未绑定)。

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>