JS: this的指向

最新推荐文章于 2024-08-14 15:45:18 发布

一染星辰

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量79

点赞数

分类专栏： javascript试题文章标签： javascript html5 html 前端

本文链接：https://blog.csdn.net/weixin_59519449/article/details/120265973

版权

本文探讨了JavaScript中this关键字的指向问题，重点解析了oninput和onchange两个事件在不同场景下this的取值，帮助前端开发者更好地理解和使用this进行事件监听。

摘要由CSDN通过智能技术生成

oninput :实时监听文本框的内容变化

onchange:元素发生时的时候执行（只能在失去焦点后执行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <!-- 在html中,this指向是dom元素本身 -->
        <button type="button" onclick="fn1()">按钮一</button>
        <button type="button" class="btn2">按钮二</button>
    </div>

    <script>
        var btn2 = document.querySelector('.btn2')

        // 第一种情况
        function fn1() {
            // 用关键字function声明的函数,this都指向window
            return (function () {
                console.log(this)
            })()
        }

        // 第二种情况
        btn2.onclick = function () {
            // js给dom元素添加事件,this指向dom本身
            console.log(this)
            
            // var o