首頁猿問如何通過事件Listener和&#...

如何通過事件Listener和'this'獲得元素的內部HTML？

JavaScript

皈依舞 2022-09-02 21:34:32

第一個和第二個代碼有效，但第三個代碼不起作用？我試圖理解它，但找不到任何東西。如果有人可以解釋它或參考一些文檔，我非常感謝！謝謝！工作正常：<p id="p" onclick="myFunc(this)">foo</p><script> function myFunc(el){ console.log(el.innerHTML) // outputs "foo"}</script>也工作正常：<p id="p">foo</p><script> document.querySelector('#p').addEventListener('click', function (event) { console.log(this.innerHTML);});</script>不起作用：<p id="p">foo</p><script> document.querySelector('#p').addEventListener('click', (this) => { console.log(this.innerHTML);});</script>第二個和第三個代碼之間的唯一區別是，第二個代碼調用“function（event）{}”，第三個代碼調用“（this）=>{}”。我以為“this”會指向節點，但它似乎指向鼠標事件。我說的對嗎？為什么“this”在“onclick=”myFunc（this）“中是一個有效的參數，但在”addEventListener（'click'，（this）{}）“中卻不是？

查看完整描述

3 回答

小唯快跑啊

TA貢獻1863條經驗獲得超2個贊

您不能將“this”對象作為匿名函數中的參數傳遞。當你這樣做時，如果你認為你有約束力，你就錯了。當您使用Anonymus鍵入函數時，“this”會自動顯示窗口對象，是的。

注1：沒有箭頭函數的構造函數或原型。它不與新的一起使用。目的不是創建對象實例。

注意2：由于2個箭頭函數不會將自己綁定到“this”綁定詞法范圍上下文不會自動綁定自身。

let clicked = () => {

console.log(this) // *"this"* will always show the window object because it was written with arrow function.

}

let clicked = function(){

console.log(this) // *"this"* will show the" p " element. Because bind inte.

}

document.querySelector("#p").addEventListener("click", clicked)

document.querySelector("#p").addEventListener("click", clicked.bind(this)) // If you do bind this way and call the clicked function, which is defined as the arrow function, *"this"* window will show the object.

<p id="p" onclick="myFunc(this)">foo</p> // The reason this works is because it shows the element when you say *"this"*. but the function is in scope if you look at the console.log(this) output, it will show the window object.

function myFunc(el){

console.log(el.innerHTML) // outputs "foo"

console.log(this) //

}

因此，您不能在箭頭函數中重新綁定“this”。它將始終被定義為定義它的上下文。如果你要求這有意義，你應該使用一個普通的函數。

我希望這有點啟示。

反對回復 2022-09-02

森欄

TA貢獻1810條經驗獲得超5個贊

addEventListener eventTarget 需要第二個參數作為 eventHandler 或 jvasrcipt 函數（參見 ref）。因此，如果您將HTML對象作為第二個參數傳遞，您將獲得一個語法錯誤：“缺少正式參數”，并且您的代碼將不會運行（檢查瀏覽器控制臺）。為了回答您的其他查詢，在本例中，這是一個 HTML p 對象。您可以檢查自己：

console.log(this);

console.log(typeof this);

反對回復 2022-09-02

慕神8447489

TA貢獻1780條經驗獲得超1個贊

我以前也有過這樣的疑問。

這主要是因為箭頭函數與普通函數不同，并且在其中一些差異中，“this”在兩者中都受到不同的對待。

“那這個呢？與常規函數相比，箭頭函數對此的處理也不同。簡而言之，使用箭頭函數沒有綁定。在常規函數中，this 關鍵字表示調用函數的對象，可以是窗口、文檔、按鈕或其他任何內容。對于箭頭函數，this 關鍵字始終表示定義箭頭函數的對象。

字體： https://www.w3schools.com/js/js_arrow_function.asp

反對回復 2022-09-02

3 回答
0 關注
140 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何通過事件Listener和'this'獲得元素的內部HTML？

如何通過事件Listener和'this'獲得元素的內部HTML？

3 回答

添加回答