dom對象中的this和event.target區別

本文轉載自查看原文 2016-09-23 09:40 2615

1.this是事件冒泡，動態變化。先觸發內部事件，由內到外的執行。

<script>
    function testdiv(val){
        console.log(val.id);
    } 
    function testa(val){
        console.log(val.id);
    }
    </script>
    <body>
        <div onclick="testdiv(this)" id="testdiv">
            <a href="#" onclick="testa(this)" id="testa">click me</a>
        </div>
    </body>

運行結果

2.event.target代表的是觸發事件的dom對象，是靜態不變的。

<script>
    function testdiv(){
        console.log(event.target.nodeName);
    } 
    function testa(){
        console.log(event.target.nodeName);
    }
    function testbody(){
        console.log(event.target.nodeName);
    }
    </script>
    <body onclick="testbody()">
        <div onclick="testdiv()" id="testdiv">
            <a href="#" onclick="testa()" id="testa">click me</a>
        </div>
    </body>

運行結果

總結：兩者都代表dom對象，如果需要調用jquery的方法可以這樣$(this),$(event.target)。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 event.srcElement與event.target的區別 JS的event.srcElement與event.target（觸發事件對象） event對象中 target和currentTarget 屬性的區別。 JavaScript事件屬性event.target JavaScript事件屬性event.target js中event的target和currentTarget的區別【兼容性】IE10中使用vue.js出現event或event.target未定義問題。 jquery對象和dom對象的區別 DOM對象和js對象以及jQuery對象的區別 vue中如何使用event對象