美文网首页
html事件处理程序中的this

html事件处理程序中的this

作者: CRJ997 | 来源:发表于2019-02-28 15:22 被阅读0次

    关于html事件处理程序,也就是直接在html元素的属性上直接添加on+事件名,例如:

    <button onclick="console.log(this)">点击试试</button>
    

    这时候,js语句是直接写在html代码里面的。这时候的this的值为点击事件发生的目标元素,也就是上面代码中的button。


    点击button结果图1

    但是如果这个函数封装在<script></script>元素中或者写在外部文件中呢?会怎么样
    实际上根据作用域来看,这时候控制台输出的应该是调用这个函数的对象。例如,如果下面这样的话:

    <script>
            function testFunction(){
                console.log(this);
            }
    </script>
    <button onclick="testFunction()">点击试试</button>
    

    那么控制台记录的应该就是调用testFunction这个函数的对象,也就是window
    看看结果:


    点击button结果图2

    相关文章

      网友评论

          本文标题:html事件处理程序中的this

          本文链接:https://www.haomeiwen.com/subject/rnohuqtx.html