Jqueryのbind()とon()のバインディングイベントメソッドのまとめ-jsチュートリアル-php.cn

Jqueryのbind()とon()のバインディングイベントメソッドのまとめ

高洛峰

リリース： 2016-12-08 16:46:23

オリジナル

1041 人が閲覧しました

一.bind()

使用法: $(selector).bind(event,data,function)

event: 必須; click、dblclick などの 1 つ以上のイベント;

Singleイベント処理: 例: $(selector).bind("click",data,function);

複数のイベント処理: 1. $(selector).bind("click dbclick Mouseout など)、スペースを使用して複数のイベントを区切ります",data, function);

2. $(selector).bind({event1:function,event2:function, ...})のように複数のイベントを柔軟に定義するには中括弧を使用します

3. スペースの分離方法:バインディングは比較的厳密です。関数はイベントに個別にバインドできませんが、同じ関数を呼び出す複数のイベントを処理するのに適しています。バインディングはより柔軟であり、関数はイベントに個別にバインドできます。渡す必要のあるパラメータ;

関数: 必須; バインディングイベントが発生したときに実行する必要がある関数;

例:

すべてのバージョンに適用されますが、公式ウェブサイトによると、 jquery1.7 バージョン以降では、bind() 関数の代わりに on() 関数を使用することをお勧めします。

II.ON():

簡単な説明

on() は、指定された要素に 1 つ以上のイベントハンドラーを追加し、これらのイベントが発生したときに実行する関数を指定します。 on() メソッドを使用するイベントハンドラーは、現在または将来の要素 (スクリプトによって作成された新しい要素など) に対して動作します。

使用方法

$(selector).on(event,childselector,data,function)

event: 要素に追加される 1 つ以上のイベント (click、dblclick など);

単一イベント処理: 例: $(selector).on("click",childselector,data,function);

複数のイベントの処理:

1. $(selector).on("click など) 複数のイベントを区切るにはスペースを使用します。 dbclick Mouseout",childseletor ,data,function);

2. $(selector).on({event1:function,event2:function, ...},childselector);

のように、中括弧を使用して複数のイベントを柔軟に定義します。

3. スペース分離方法: バインディングは比較的厳格であり、同じ関数を呼び出す複数のイベントを処理するのに適しています。

バインディングはより柔軟であり、関数をイベントに個別にバインドできます。

childSelector: オプション。イベントハンドラーを追加する必要がある要素。通常はセレクターのサブ要素。

function: バインディングイベントが発生するときに必要なパラメータ。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jquery中bind()绑定事件方式</title>
  <style type="text/css">
    .container
    {
      width: 300px;
      height: 300px;
      border: 1px #ccc solid;
      background-color: Green;
    }
    .btn-test
    {
      border: 1px #ccc solid;
      padding: 5px 15px;
      cursor: pointer;
    }
  </style>
  <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
 
      /*********添加单个事件处理*********/
 
      $(".btn-test").bind("click", function () {
        //显示隐藏div
        $(".container").slideToggle();
      });
 
      /********添加多个事件处理********/
 
      //空格相隔方式
      $(".btn-test").bind("mouseout click", function () {
        //显示隐藏div
        $(".container").slideToggle();
      });
 
      //大括号替代方式
      $(".btn-test").bind({
        "mouseout": function () {
          alert("这是mouseout事件!");
        },
        "click": function () {
          $(".container").slideToggle();
        }
      });
 
      /********删除事件处理********/
      $(".btn-test").unbind("click");
 
    });
  </script>
</head>
<body>
  <input type="button" value="按钮" class="btn-test" />
  <div class="container">
  </div>
</body>
</html>

ログイン後にコピー

Jquery バージョン

jquery1.7 以降に適用; jquery1.7 バージョンの出現後、bind() および live() バージョンが使用されます。

同じ点:

1. どちらも複数のイベントのバインドをサポートします。スペース分離メソッドまたは中括弧置換メソッドです。

比較と接続:

1.bind() 関数は既存の要素に対してのみイベントを設定できますが、live()、on()、および delegate() はすべて、将来的に追加される要素のイベント設定をサポートします

は次のとおりです。 :

2.bind() 関数は jQuery バージョン 1.7 にあり、以前は比較的人気がありましたが、バージョン 1.7 の登場後、bind() は正式に推奨されなくなりました。これも新しく追加された関数です。同様に、live() 関数の代わりに使用できます。live() 関数はバージョン 1.9 で削除されました。 () 関数は、実行速度、柔軟性、CSS セレクターのサポートの点で delegate() よりも優れています。さらに悪いことに、具体的な状況を知りたい場合は、ここをクリックしてください:

4.bind() は、Jquery のすべてのバージョンをライブでサポートします。 () jquery1.8- をサポート; delegate() は jquery1.4.2+ をサポート; on() は jquery1.7+ をサポート ;

プロジェクトで参照されている jquery のバージョンがそれよりも低い場合は、delegate() を使用することをお勧めします。 jquery の上位バージョンでは、代わりに on() を使用できます。上記は単なる個人的な意見です。異なるアイデアがある場合は、お気軽にお問い合わせください。