html onclick 屬性觸發的function如何取得元素物件

假設html文件中有一個a元素如下:

<a onclick="點擊連結時觸發的javascript程式碼" href="https://google.com.tw">click me</a>

onclick屬性是當使用者點擊元素時觸發其中的程式碼

很多時候我們會希望能取得a元素本身這個物件做進一步的判斷和處理，例如點擊時變更該元素的css屬性或是刪除該元素等等，那麼該如何達到目的呢?

首先我們要知道onclick=""，其實 "" 背後代表的是一個匿名函數，是綁定到這個a元素的click事件的一個匿名函數， "" 就是隱形的function () 的 大括號，因此在這個函數內取得自身元素的最簡單方法就是"this"關鍵字:

onclick="console.log(this);"   //其中的this就代表a這個元素

但是很多時候在點擊之後會需要做比較多的處理，不適合在inline屬性(直接寫在html元素裡面的屬性)上寫太多程式碼，此時就需要另外定義一個函數做處理

onclick="myFunction();"

<script>
   function myFunction () {
         console.log(this);
         //注意! 此時這個this是global物件，也就是window物件，而非a元素
   }
</script>

此時要如何取得元素物件呢?

方法1:
呼叫myFunction時將a元素物件做為參數傳遞

onclick="myFunction(this);"   // 在隱形的匿名函數裡this是指a元素

function myFunction (tarObj) {
         console.log(tarObj);
         //此時tarObj代表在呼叫時傳入的this，也就是a元素
   }

方法2:
以call或apply方法呼叫函數，並指定函數owner為a元素

先說明call的用法:

function test(a,b) {
     console.log(a*b);
     console.log(this);
}

這是一個擁有兩個參數的函數，使用call方法呼叫的語法如下:
test.call(<某個p元素>, 5, 3)
第一個參數會成為test函數內部的this所代表的元素
所以輸出結果會如下:
15
<p></p>

現在回到主題，

onclick="myFunction.call(this);"
// 在隱形的匿名函數裡this是指a元素，而call方法的第一個參數指定函數內部的this關鍵字代表的物件

function myFunction () {
         console.log(this);
         //此時的this就代表a元素，因為在使用call方法呼叫myFunction這個函數時，第一個參數傳入this(在當時環境下，代表a元素)，而call的第一個參數，則是讓指定的元素成為被呼叫的函數中的this，有點抽象，因為都叫this，但代表的是不同的東西
   }

以上分享