9

JavaScript でイベントを設定するには、主に 2 つの方法があります。

  1. 次のように、タグ内に直接イベントを追加します。

    <a href="" onclick="doFoo()">do foo</a>

  2. 次のように JavaScript で設定します。

    <a id="bar" href="">do bar</a>

そして、 prototypeJS<script>を使用している場合のように、セクション内の<head>セクションまたは外部 JavaScript ファイルにイベントを追加します。

Event.observe(window, 'load', function() {
    $('bar').observe('click', doBar);
}

最初の方法は読みやすく維持しやすいと思います (JavaScript アクションがリンクに直接バインドされているため) が、あまりきれいではありません (ページが完全にロードされていなくてもユーザーがリンクをクリックできるため、JavaScript エラーが発生する可能性があるため)ある場合には）。

2 番目の方法は簡潔ですが (ページが完全にロードされたときにアクションが追加されます)、アクションがタグにリンクされていることを知るのはより困難です。

どの方法が最適ですか?

キラーな回答は大歓迎です！

4

6 に答える 6

9

最初の方法の方が読みやすく、維持しやすいと思います

私はその反対が真実であることを発見しました。特定のコントロールに複数のイベント ハンドラーがバインドされる場合があることに注意してください。

すべてのイベントを 1 か所で宣言すると、サイトで行われているアクションを整理するのに役立ちます。何かを変更する必要がある場合、関数を呼び出すすべての場所を検索する必要がない場合は、1 つの場所で変更するだけで済みます。同じ機能を持つ必要がある要素をさらに追加する場合、それらにハンドラーを追加することを覚えておく必要はありません。代わりに、多くの場合、クラスを宣言させるか、まったく変更しなくても十分です。これは、すべての子要素がアクションに関連付けられるコンテナー要素に論理的に属しているためです。実際のコードから:

$$('#itemlist table th > a').invoke('observe', 'click', performSort);

これにより、イベント ハンドラーがテーブル内のすべての列ヘッダーに接続され、テーブルが並べ替え可能になります。すべての列ヘッダーを個別にソート可能にする努力を想像してみてください。

于 2008-08-29T07:50:12.100 に答える
4

私の経験では、これには 2 つの大きなポイントがあります。

1) 最も重要なことは、一貫性を保つことです。2 つの方法のどちらかが読みやすいとは限りません。プロジェクトで両方のメソッドが使用されている場合 (または同じページでさらに悪い場合) に混乱するだけです。

2) 2 番目の種類。つまりEvent.observe()、同じまたは非常に類似したアクションが複数のイベントで実行される場合に利点があります。これは、これらのすべての呼び出しが同じ場所にある場合に明らかになるためです。また、Konrad が指摘したように、場合によってはこれを 1 回の呼び出しで処理できます。

于 2008-08-29T08:10:41.037 に答える
3

CSS がプレゼンテーションをマークアップから分離するのと同じように、アクション (つまり JavaScript) に関する情報をマークアップから分離するため、2 番目の方法が一般的に好まれると思います。

これにより、ページで何が起こっているかを確認するのが少し難しくなることに同意しますが、firebug などの優れたツールがこれを大いに助けてくれます。また、HTML と Javascript の混在を最小限に抑えれば、より優れた IDE サポートを利用できるようになります。

このアプローチは、プロジェクトが成長するにつれて真価を発揮し、多くの異なるページのさまざまな要素タイプに同じ JavaScript イベントを関連付けたいと思うようになります。その場合、特定の関数が呼び出された場所を見つけるために多くの異なる HTML ファイルを検索するよりも、イベントを添付する単一のペースを持つ方がはるかに簡単になります。

于 2008-08-29T09:05:59.110 に答える
1

addEventListener (IE ではない) / attachEvent (IE で) を使用することもできます。

チェックアウト: http://www.quirksmode.org/js/events_advanced.html

これらを使用すると、関数 (または複数の関数) を既存の DOM オブジェクトのイベントにアタッチできます。また、後でアタッチメントを解除できるという利点もあります。

一般に、大量の JavaScript を使用している場合は、HTML ではなく、 JavaScriptを読みやすくすると便利です。したがってonclick=X、html は非常に明確であると言えますが、これはコードの分離の欠如 (断片間の別の構文依存性) と、理解するために html と JavaScript の両方を読まなければならないケースの両方です。ページの動的な動作。

于 2008-08-29T08:29:19.120 に答える
0

YUI や jQuery などのライブラリは、DOM の準備ができてから (window.onload の前に) イベントを追加するメソッドを提供します。また、複数のイベント ハンドラーを追加できるため、さまざまなイベント ハンドラーが互いに上書きすることなく、さまざまなソースからスクリプトを使用できます。

したがって、あなたの実際的な選択は次のとおりです。

1。スクリプトが単純で、ページ上で実行される唯一のスクリプトである場合は、次のように init 関数を作成します。

window.onload = function () {
    init();
}
function init() {
    // actual function calls go here
    doFoo();
}

二。多くのスクリプトがある場合、またはさまざまなソースからスクリプトをマッシュアップする予定がある場合は、ライブラリとそのonDOMReadyメソッドを使用して、イベント ハンドラーを安全に追加します。

于 2008-08-29T07:41:45.473 に答える
0

私の個人的な好みは、js が html から完全に分離されるように、外部の js ファイルで jQuery を使用することです。Javascript は目立たないようにする必要があるため、インライン (つまり、最初の例) は、私の意見では実際には最良の選択ではありません。html を見ると、js を使用していることを示す唯一の兆候は、head にスクリプトが含まれていることです。

イベントを添付 (および処理) する例は、次のようになります。

var myObject = {

    allLinkElements: null,  

    init: function()
    {
        // Set all the elements we need
        myObject.setElements();

        // Set event handlers for elements
        myObject.setEventHandlers();
    },

    clickedLink: function()
    {
        // Handle the click event
        alert('you clicked a link');
    },

    setElements: function()
    {
        // Find all <a> tags on the page
        myObject.allLinkElements = $('a');

        // Find other elements...
    },

    setEventHandlers: function()
    {
        // Loop through each link
        myObject.allLinkElements.each(function(id)
        {   
            // Assign the handler for the click event
            $(this).click(myObject.clickedLink);
        });

        // Assign handlers for other elements...
    }
}

// Wait for the DOM to be ready before initialising
$(document).ready(myObject.init);

このアプローチは、タスクに特定のオブジェクトを使用でき、すべてが適切に含まれているため、すべての js を整理しておきたい場合に役立つと思います。

もちろん、jQuery (または他のよく知られているライブラリ) に難しい作業を任せることの大きな利点は、クロスブラウザーのサポートが (大部分) 処理され、作業がずっと楽になることです。

于 2008-08-29T09:56:49.863 に答える