40

私は Joomla の Web サイト / コンポーネント / モジュールとプラグインを開発していますが、ページが読み込まれたときにイベントをトリガーする JavaScript を使用する機能が必要になることがよくあります。ほとんどの場合、これはwindow.onload関数を使用して行われます。

私の質問は：

  1. これは、ページの読み込み時に JavaScript イベントをトリガーする最良の方法ですか、それともより良い/新しい方法はありますか?
  2. これがページの読み込み時にイベントをトリガーする唯一の方法である場合、異なるスクリプトで複数のイベントを確実に実行できるようにする最善の方法は何ですか?
4

7 に答える 7

46

window.onload = function(){};動作しますが、お気づきかもしれませんが、1 つの listener しか指定できません。

これを行うためのより良い/新しい方法は、フレームワークを使用するか、イベントのリスナーも削除addEventListenerできるネイティブ メソッドとattachEvent(IE の場合) メソッドの単純な実装を使用することだと思います。

クロスブラウザの実装は次のとおりです。

// Cross-browser implementation of element.addEventListener()
function listen(evnt, elem, func) {
    if (elem.addEventListener)  // W3C DOM
        elem.addEventListener(evnt,func,false);
    else if (elem.attachEvent) { // IE DOM
         var r = elem.attachEvent("on"+evnt, func);
         return r;
    }
    else window.alert('I\'m sorry Dave, I\'m afraid I can\'t do that.');
}

// Use: listen("event name", elem, func);

window.onload の場合は、次を使用します。listen("load", window, function() { });

編集他の人が指摘した貴重な情報を追加して、回答を拡大したいと思います。

これは、DOMContentLoaded(Mozilla、Opera、および webkit nightlies が現在これをサポートしている) および(すべての画像/スタイルシートなどを待たずに) ドキュメントを操作できるようになるタイミングを理解するためにドキュメントオブジェクトに適用できるonreadystatechange(IE の場合)イベントに関するものです。 .. ロードされます)。

これをクロスブラウザでサポートするための「ハッキーな」実装がたくさんあるので、この機能にはフレームワークを使用することを強くお勧めします。

于 2009-02-17T23:15:43.593 に答える
13

window.onload イベントは、複数の作成でオーバーライドされます。関数を追加するには、window.addEventListener (W3C 標準) または window.attachEvent (IE 用) を使用します。機能した次のコードを使用します。 

if (window.addEventListener) // W3C standard
{
  window.addEventListener('load', myFunction, false); // NB **not** 'onload'
} 
else if (window.attachEvent) // Microsoft
{
  window.attachEvent('onload', myFunction);
}
于 2012-08-21T14:24:05.510 に答える
2

Joomla には MooTools が付属しているため、追加のコードには MooTools ライブラリを使用するのが最も簡単です。MooTools には、ページが読み込まれ、ドキュメント ツリーが解析されると発火する domready というカスタム イベントが同梱されています。

window.addEvent( domready, function() { code to execute on load here } );

MooTools の詳細については、こちらを参照してください。Joomla 1.5 は現在 MT1.1 で出荷されますが、Joomla 1.6 アルファには MT1.2 が含まれます。

于 2009-06-24T19:17:08.090 に答える
1

これは汚いが短い方法です:P

function load(){
   *code*
}

window[ addEventListener ? 'addEventListener' : 'attachEvent' ]
( addEventListener ? 'load' : 'onload', function(){} )
于 2012-09-14T09:34:11.657 に答える
1

個人的には、この方法の方が好きです。複数の関数を使用できるようにするだけでなく、関数に到達する前にonload何らかのスクリプトで関数を定義していた場合、このメソッドはそれを処理するのに十分です...残っている唯一の問題は、ページが使用しない複数のスクリプトをロードする場合です関数; しかし、それは彼らの問題です:)。window.addLoad()

PS 後でさらに機能を「チェーン」したい場合にも最適です。

于 2009-02-18T03:26:57.687 に答える
0

私は常にドキュメントの下部に jQuery/bootstrap JS ファイルを含めて$おり、ドキュメントにアクセスすることはできません。ページの一番上に含める唯一の JS スクリプトである小さな「init」プラグインを開発しました。

window.init = new function() {
    var list = [];

    this.push = function(callback) {
        if (typeof window.jQuery !== "undefined") {
            callback();
        } else {
            list.push(callback);
        }
    };

    this.run = function() {

        if (typeof window.jQuery !== "undefined") {
            for(var i in list) {
                try {
                    list[i]();
                } catch (ex) {
                    console.error(ex);
                }
            }
            list = [];
        }
    };

    if (window.addEventListener) {
        window.addEventListener("load", this.run, false);
    } else if (window.attachEvent) {
        window.attachEvent("onload", this.run);
    } else {
        if (window.onload && window.onload !== this.run) {
            this.push(window.onload);
        }
        window.onload = this.run;
    }
};

これを使用して、jQuery とブートストラップを含める前に、ページ上で任意の匿名ローダーを定義し、jQuery が存在すると起動することを確認できます。

init.push(function() {

    $('[name="date"]').datepicker({
        endDate: '0d',
        format: 'yyyy-mm-dd',
        autoclose: true
    }).on('hide', function() {
        // $.ajax
    });

    $('[name="keyword_id"]').select2();
});
于 2015-10-23T09:16:28.630 に答える