3

通常のスタイル

<a href="#" id="myLink" onclick="myFunc();">click me</a>

function myFunc() {
    alert('hello!');
}

jQuery スタイル

<a href="#" id="myLink">click me</a>

$(document).ready(function() {
    $("#myLink").click(function() {
        alert('hello!');
    });
});

jQueryを使い始めたばかりなのですが、この2つの違いは何なのか気になります。jQuery メソッドを使用する必要がありますか? このようにすると、何か利点はありますか？

私は、jQuery メソッドを使用して html を読み取るときに、リンクが何をするかについての手がかりがないのが好きではありません。複数の要素 (例: ) にアタッチする場合は jQuery の attach メソッドが非常に便利であることがわかりました$("#myTable tr").click(function(e) {...});が、単一の要素を処理する場合は、どれを使用すればよいかわかりません。

4

4 に答える 4

4

いくつかの理由から、私は 2 番目のアプローチが好きです。

  1. すべての JavaScript を 1 か所に保持します。HTML を読んだときにリンクをクリックしたときに何が起こるかわからないというのは正しいことですが、逆に言えば、イベント ハンドラをインラインで定義すると、JavaScript を読んだときに、関数が呼び出されます。私は自分の「レイヤー」をできるだけ分けておくのが好きです。

  2. これは、「邪魔にならない JavaScript 」と呼ばれることもある機能と、アプリケーションの正常な低下を促進します。グレースフル デグラデーション (または「プログレッシブ エンハンスメント」) の考え方は、リンクを別のページに移動する実際のリンクにすることですが、JavaScript を使用してクリック イベントをハイジャックし、ページを離れることなく同じ機能を提供します。このように、ユーザーが JavaScript を持っていない場合 (たとえば、スクリーン リーダーを使用している無効なユーザーである場合)、アプリケーションは引き続き機能します。

  3. これにより、JavaScript がより再利用可能になります。CSS クラスなどの一般的なものに基づいて、イベント ハンドラーをバインドする要素を定義するとします。次に、そのJavaScriptをさまざまなページにドロップして、「そのまま機能させる」ことができます。たとえば、自動保存などのために常にこれを行っています。

于 2010-07-01T14:54:33.107 に答える
1

同様の懸念があり、JavaScript名前空間からのイベントをバインドするためにJqueryと名前空間を使用することにしたので、あなたの懸念を知っています。これは、イベントを単一の要素にフックする方法と、同じクラスまたはタグ名を持つ複数の要素にイベントをフックする方法です。

基本的に、クリック、ホバー、マウスオーバーなどのイベントに名前空間を付けてから、document.readyで名前空間を付けたイベントを呼び出します。この理由は、クリック、ホバー、マウスオーバーのすべてのイベントを1か所から確認できるためです。

<script type="text/javascript">

  var Page1 = {
    Events: {
       click: {
         elementid: {
           func: function(evt) {  //where elementname is the id of your element
           //your code here
           },
           selector: "#someId"
         }
         elementclass: {
           func: function(evt) { //where elementclass is the class of your element(s)
           //your code here
           },
           selector: ".someClass"
         },
       mouseover: {
         //similar to click namespace
       },
       mouseout: {
         //similar to click namespace
       },
       ....
    }
  };

  $(document).ready(function() {
    for (var key in Page1.Events) {
      for (var eventKey in Page1.Events[key]) {
        $(Page1.Events[key][eventKey].selector).bind(key, Page1.Events[key][eventKey].func);
      }
    }
  });

</script>

これの良いところは、名前空間にイベントを追加するだけで、ドキュメントの準備ができた状態で自動的にフックされることです。$ .bind呼び出しをLiveに置き換えるか、デリゲートして将来のdom要素にフックすることもできます。

于 2010-07-01T15:05:51.873 に答える
0

JQueryのイベント処理方法は目立たないように定義されており（http://en.wikipedia.org/wiki/Unobtrusive_JavaScript）、ロジックとプレゼンテーションが明確に分離されており、通常はコードの再利用性が高いため、通常は「標準」の方法よりも優先されます。 。

言うまでもなく、JQuery（ただし他のライブラリも同じことを行います）がブラウザーの不整合を処理します。

于 2010-07-01T14:59:28.107 に答える
0

私はjQueryメソッドでhtmlを読むとき、それが好きではありません。リンクが何をするのかについての手がかりはありません。

JavaScriptが無効になっているブラウザにも、リンクが何をするのかわかりません。ドキュメントの先頭を指すリンクが表示されます。

他の回答onclickは、HTMLのスタイルイベントを回避する多くの理由をすでに示しています...また、ドキュメント内のタグに目的がある<a href="#">ことを確認して、HTMLのリンクを回避するように最善を尽くしています。ブラウザがクリックイベントを処理できる場合にのみ<a>、 jQueryを使用して追加<a>のタグを作成し、機能を追加します。

于 2010-07-01T15:06:05.773 に答える