javascript/HTML：將事件處理函數與對象作為 HTML 字符串文字中的參數綁定

Question

使用我正在開發的電子應用程序，我未能將對象傳遞到圖像的onclick事件處理程序中。 事件處理程序在 HTML 中指定，但 HTML 是 JS 中的字符串文字。

目標

這個想法是將類My的對象傳遞到對象代碼嘗試生成的圖像控件的事件處理程序中，請參閱下面的代碼

class My {
    constructor() {
        this.id = '123';
    }
    GenerateCtrl() {
        let html = `
            <div class="myclass" id="my-${this.id}">
                <img class="img-btn" id="do-${this.id}" src="images/btn-img.png" role="button" onclick="Do(this, '${this}')">
            </div>
        `;
        return html;
    }
}

上面的 HTML 將是我頁面的一部分。

這是事件處理程序

function Do(img, myobj) {
    alert(JSON.stringify(myobj));
}

構建頁面時的調用方代碼：

const sect = document.querySelector(.myclass);

var myObj = new My();

sect.innerHTML = myObj.GenerateCtrl();

我可以毫無問題地看到頁面上的圖像控件。

期待

單擊圖像時，我希望看到顯示對象內容的警報。

觀察

但我在警報中只能看到"[object Object]" 。

評論

這告訴我該對象不是作為參數通過該處理程序函數，而是作為轉換后的字符串。

我應該如何解決這個問題？

Answer 1

正確的方法是將 HTML 作為元素插入，而不是 HTML 字符串，以便可以預先將偵聽器附加到內部<img> 。 將事件偵聽器附加到您已經引用其父元素的元素非常便宜，基本上沒有性能損失。 這是代碼的外觀，使用createElement創建外部元素，然后使用appendChild插入它：

 function Do(my) { console.log(my); } class My { constructor() { this.id = '123'; } GenerateCtrl() { const div = document.createElement('div'); Object.assign(div, { id: `my-${this.id}`, className: 'img-btn' }); div.innerHTML = `<img class="img-btn" id="do-${this.id}" src="images/btn-img.png" role="button">`; div.children[0].addEventListener('click', () => Do(this)); return div; } } var myObj = new My(); document.querySelector('.myclass').appendChild(myObj.GenerateCtrl());

 <div class="myclass"></div>

內聯處理程序有太多問題：

• 它們有轉義問題（它們需要在 Javascript 字符串中表示，字符串分隔符在內部為 Javascript 正確轉義，並為 HTML 標記正確轉義）
• 它們需要全局污染（您當前的實現需要一個全局window.Do函數）
• 它們在兩個不直觀的with語句中運行 - 一個用於document ，一個用於當前元素
• 他們不能引用創建內聯處理程序的閉包內的變量或對象

最好避開它們。