JavaScript 事件處理深度解析：onclick 綁定函數的參數 e、this、target 全搞懂

代碼片段：

var buttons = document.getElementsByTagName('tag name');
for (var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function(e) {
        document.getElementById('id').innerHTML = e.target.innerHTML;
    };
}

逐行解釋

1. getElementsByTagName 返回即時 HTMLCollection，包含所有匹配標籤的 DOM 元素
2. for 循環遍歷集合，為每個元素賦值 onclick 屬性（注意：這會覆蓋原有行內 onclick）
3. 匿名函數 function(e) 成為事件處理器，瀏覽器調用時自動傳入 Event 對象
4. e.target 指向**實際觸發事件的最內層元素**（如點擊 <div><b>文字</b></div> 中的 <b>，target 是 b）
5. this 指向**綁定事件的當前元素**（即 buttons[i]）
6. 將 target 的 innerHTML 賦值給目標容器，實現「點擊哪裡顯示哪裡的 HTML」

關鍵區別

• 觸發源：事件由用戶點擊 button[i] 觸發，非 e.target.innerHTML 觸發
• 賦值含義：buttons[i].onclick = fn 是**註冊**處理器，而非調用。調用發生在後續用戶點擊時

IE8- 兼容寫法

buttons[i].onclick = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    document.getElementById('id').innerHTML = target.innerHTML;
};