コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > Javascript 動的バインディングの単純な実装コード events_javascript スキル

Javascript 動的バインディングの単純な実装コード events_javascript スキル

WBOY
リリース： 2016-05-16 18:13:23
オリジナル
1110 人が閲覧しました

以下はページの DOM 構造です

コードをコピー コードは次のとおりです:


  • 1

  • 3
    • ;li>Four 以下のように:


    //ID に基づいてオブジェクトを取得します
    function id(v) { return document.getElementById(v) }

    //タグに基づいてオブジェクトを取得します
    function tag(element, t) { return element.getElementsByTagName(t) }
    window.onload = function() { / /テスト中のすべての li オブジェクトを取得しますvar li = tag (id("test"), "li")//ループを使用してマウス クリック イベントをバインドしますfor(var i=0; ili[i].onclick = function() {
    // 1,2,3,4 が表示されると予想されます
    //は常に 5
    alert(""(i 1) "項目" をクリックしました);
    }
    }
    }


    上記の現象はなぜ発生しますか?理由は「forにバインドされているイベントがすぐに実行されない」からです。変更されたコードは次のとおりです:




    コードをコピー


    コードは次のとおりです:


    // ID に基づいてオブジェクトを取得します
    function id(v) { return document.getElementById(v) }

    //タグに従ってオブジェクトを取得します
    function tag(element, t) { return element.getElementsByTagName(t); }
    window.onload = function() { //テスト中のすべての li オブジェクトを取得しますvar li = tag(id("test"), " li"); //ループを使用してマウス クリック イベントをバインドします for(var i=0; i(function() {
    var t = i
    li [i].onclick = function() {
    alert("t " 番目の "項目をクリックしました");
    }
    })();
    }
    }


    コードをテストします。通常はループ変数 i を onclick イベントに対応するハンドラー関数に渡します。
    関連ラベル：
    动态绑定事件
    ソース：php.cn
    前の記事：replaceAll() 関数を使用して javascript_javascript スキルで文字置換を実装する方法 次の記事：extjs_extjs の s.gif を削除した場合の影響
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    強制更新は、Next.js の未定義のパスまたはエラー ページにアクセスした結果発生します。 未定義のパスまたはエラー ページにアクセスすると、Next.js がハード リフレッシュを実行し、コンテキストがデフォルトの状態に戻ります (つまり、userProfile 状態変...
    から 2024-04-05 08:32:46
    0
    1
    400
    別のボタンがフォーカスされている、またはフォーカスされているときに、ボタンのフォーカス状態をトリガーするにはどうすればよいですか? 参照の表示 (ボタン) ライブラリ名が選択またはクリックされたときに、次の非アクティブなボタンがアクティブになる (明るい赤になる) ようにしたいと考えています。グーグルで調べたと...
    から 2024-04-02 16:49:31
    0
    1
    336
    AJAX POST リクエストのフィールドを更新する jQuery または Javascript を使用して、AJAXPOST リクエストのカスタム フィールドを動的に更新しようとしています。 AJAXPOST リクエストは、Word...
    から 2024-04-02 11:45:41
    0
    1
    360
    電子メールでのビデオ再生を簡素化: 即時再生を保証し、ダウンロード画面は必要ありません ここで「はしごをどの壁に立てかけるべきか」もわかりませんし、私がやろうとしていることの正しい用語さえもわかりません。私は長年、農業研究会社でソフトウェアを開発してきました。当社では...
    から 2024-03-30 17:12:51
    0
    1
    433
    REACT TS コンポーネント ラッパーでカスタム プロパティとネイティブ プロパティを組み合わせるシームレスな方法はありますか? 入力、ボタン、フォームなどのネイティブ機能を拡張するコンポーネントがいくつかありますが、チームが必要とするときにすべてのイベント ハンドラーとプロップを含める必要があるのは面倒だと...
    から 2024-03-30 17:01:40
    0
    1
    346
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート