我應該在javascript中使用“this”或“event.target”嗎？

Question

我在下面創建了一個簡單的div演示，一旦點擊就不會顯示。

<div id="three" onclick="toggle2(event);return false;" style="background:#303; color:#FFF;">

function toggle2(e) {

    var textx = (e.target) ? e.target : e.srcElement;
    textx.style.display = "none";

    console.log(e.target);
} 

我的問題是，如果我更換，有什么區別

<div id="three" onclick="toggle2(event);return false;" style="background:#303; color:#FFF;">

同

<div id="three" onclick="toggle2(this);return false;" style="background:#303; color:#FFF;">

他們兩個都適合我上面的例子......

Answer 1

它們可能完全相同。 這取決於HTML。 在這種情況下， this將始終是div元素。 this指的是捕獲事件的元素。 但是， event.target指向發生事件的元素。

如果元素沒有子元素，則它們將始終相同。 但是，如果你有這樣的事情：

<div id="three" onclick="toggle2(event);return false;" style="background:#303; color:#FFF;">
    <span>Line 1</span>
    Line 2
</div>

然后他們可能會有所不同。 單擊Line 1行將導致event.target成為span元素，因此只會隱藏該元素。

除非特別想指向產生事件的元素，它更直觀的使用this 。

Answer 2

當“e”是像參數中傳遞的點擊一樣的事件時，通常使用e.target。

當您將此作為參數傳遞時，這是對具有javascript方法的DOM節點的引用。 所以在這里，“this”引用了div。

當你在你的div上有一個點擊事件時，當你點擊它時，它被認為是一個事件，這就是為什么這個和e.target都有效。

此外，“this”將始終引用您的div，而“e.target”將引用您在div中單擊的元素。

Answer 3

該事件指的是當前被觸發的事件。 現在，在瀏覽器中，事件從觸發事件的元素冒泡到其父元素，直到它到達文檔根目錄。 更多內容： 什么是事件冒泡和捕獲？

在您的示例中， 事件指向click事件， event.target是div ， 這指的是div本身。 如果你將一個子元素添加到div並單擊該元素，那么event.target將指向子元素， 這仍將引用div 。

Answer 4

我認為沒有必要this作為參數傳遞給onclick事件，你可以直接使用this函數。