我應該在JavaScript中使用「this」或「event.target」嗎？

我在下面創建了一個簡單的div演示，一旦點擊就不會顯示任何內容。我應該在JavaScript中使用「this」或「event.target」嗎？

<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;">

他們都做工精細我的例子abovee .....

來源

2013-06-12 Vincent Chua

很可能它們完全一樣。這取決於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更直觀。

來源

2013-06-12 08:23:12 lonesomeday

我認爲沒有必要通過this作爲onclick事件的參數，您可以使用this直接到函數。

來源

2013-06-12 08:13:18 campsjos

當「e」是類似點擊傳入參數的事件時，通常使用e.target。

當您將此參數作爲參數傳遞時，這是對具有javascript方法的DOM節點的引用。所以在這裏，「this」引用div。

而且，由於您在div上有一個點擊事件，因此當您點擊該事件時，它被視爲一個事件，這就是爲什麼這個和e.target都可以工作。

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

來源

2013-06-12 08:16:35 Zaidar

事件指的是當前正在觸發的事件。現在，在瀏覽器中，事件從事件觸發的元素向其父節點冒泡，直到它到達文檔根目錄。更多在：What is event bubbling and capturing?

在您的例子中，事件點到Click事件和event.target是DIV和這指DIV本身。如果您將子元素添加到div並點擊元素，然後點擊事件。目標將指向子元素和這仍將參照DIV。

來源

2013-06-12 08:27:49

我應該在JavaScript中使用「this」或「event.target」嗎？

回答

相關問題