首頁 > web前端 > js教程 > 為什麼 JavaScript 迴圈中的事件處理程序會引用相同的變數?

為什麼 JavaScript 迴圈中的事件處理程序會引用相同的變數?

DDD
發布: 2024-11-05 20:36:02
原創
712 人瀏覽過

Why Do Event Handlers in JavaScript Loops Refer to the Same Variables?

在JavaScript 循環中使用事件處理程序:使用閉包進行不同的事件處理

在JavaScript 中,當使用HTML 程式碼時,事件處理程序會發揮作用在使用者與網頁互動方面發揮著至關重要的作用。然而,當這些事件處理程序在循環中定義時,會出現一個常見的挑戰,從而導致意外行為。

為了說明此問題,請考慮以下程式碼片段:

<code class="javascript">var blah = xmlres.getElementsByTagName('blah');
for(var i = 0; i < blah.length; i++) {
    var td = document.createElement('td');
    var select = document.createElement('select');
    select.setAttribute("...", "...");
    select.onchange = function() {
        onStatusChanged(select, callid, anotherid);
    };
    td.appendChild(select);
}</code>
登入後複製

當onchange 時 是什麼。觸發事件的元素。這種行為源自於 JavaScript 在定義事件處理程序時實作閉包的方式。

具體來說,在迴圈內,閉包 select.onchange = function() 引用變數 callid 和 anotherid,它們攜帶在迴圈的最後一個迭代。因此,當觸發事件時,這些變數的值不是與特定

為了解決這個問題,可以實作一個閉包來捕捉事件處理程序定義時的 select、callid 和 anotherid 的值。以下程式碼示範了這種方法:

<code class="javascript">var blah = xmlres.getElementsByTagName('blah');
for(var i = 0; i < blah.length; i++) {
    var td = document.createElement('td');
    var select = document.createElement('select');
    select.setAttribute("...", "...");
    select.onchange = function(s,c,a)
    {
        return function()
        {
            onStatusChanged(s,c,a);
        }
    }(select, callid, anotherid);
    td.appendChild(select);
}</code>
登入後複製

總之,在 JavaScript 迴圈中定義事件處理程序時使用閉包對於確保事件處理程序函數接收所涉及變數的適當值至關重要。這種做法允許基於特定的

以上是為什麼 JavaScript 迴圈中的事件處理程序會引用相同的變數?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板