jQueryのイベント

4424 ワード

jqueryイベント

イベント関数のリスト:

blur():要素が焦点を失う

focus():要素獲得焦点

change():フォーム要素の値が変化

click():マウスクリック

dblclick():マウスダブルクリック

mouseover():マウス進入(サブエレメントに入ってもトリガー)

mouseout():マウスを離す(サブエレメントを離すもトリガー)

mouseenter():マウス進入(サブエレメントに入るとトリガーされない)

mouseleave():マウスを離す(サブエレメントを離すとトリガーされない)

hover():mouseenterとmouseleaveイベントの処理関数

を同時に指定する

mouseup():マウス

を離す

mousedown():マウス

を押す

mousemove():マウスが要素の内部を

移動

keydown():キーボード

を押す

keypress():キーボード

を押す

keyup():キーボードを離す

load():要素ロード完了

ready():DOMロード完了

resize():ブラウザウィンドウのサイズが変更されました

scroll():スクロールバーの位置が変化

select():ユーザ選択テキストボックスの内容

submit():ユーザー提出フォーム

toggle():マウスのクリック回数に応じて複数の関数

を順次実行する.

unload():ユーザがページ

から離れる

イベントをバインドする他の方法

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());
    });
});

バインド解除イベント

  $(function(){
      $('#div1').bind('mouseover click', function(event) {
          alert($(this).html());

          // $(this).unbind();
          $(this).unbind('mouseover');

      });
  });

アクティブトリガとカスタムイベント

アクティブトリガ

は、jqueryオブジェクト上のtriggerメソッドを使用して、オブジェクト上でバインドされたイベントをトリガすることができる.

カスタムイベント

システムイベントに加えてbindメソッドでイベントをカスタマイズし、tiggleメソッドでイベントをトリガーできます.

// element  hello  
element.bind("hello",function(){
    alert("hello world!");
});

//  hello  
element.trigger("hello");

イベントバブル

イベントバブルとは

は、onclickイベントをクリックするなどのオブジェクト上でイベントをトリガーします.このイベントのハンドラが定義されている場合、このイベントはこのハンドラを呼び出します.このイベントハンドラが定義されていない場合、またはイベントがtrueに戻ると、このイベントはこのオブジェクトの親オブジェクトに伝播し、中から外に伝播します.処理されるまで(親オブジェクトのすべての同類イベントがアクティブになる)、またはオブジェクト階層の最上位レベル、すなわちdocumentオブジェクト(一部のブラウザはwindow)

に到達します.

イベントバブルの役割

イベントバブルにより、複数の操作が集中的に処理されます(イベントプロセッサを親要素に追加し、イベントプロセッサを複数のサブ要素に追加しないようにします).また、オブジェクト層の異なるレベルでイベントをキャプチャすることもできます.

イベントのバブルを阻止

事件の泡のメカニズムは時には不要で、eventを通じて阻止する必要がある.stopPropagation()

$(function(){
    var $box1 = $('.father');
    var $box2 = $('.son');
    var $box3 = $('.grandson');
    $box1.click(function() {
        alert('father');
    });
    $box2.click(function() {
        alert('son');
    });
    $box3.click(function(event) {
        alert('grandson');
        event.stopPropagation();

    });
    $(document).click(function(event) {
        alert('grandfather');
    });
})

......

阻止默认行为

阻止右键菜单

$(document).contextmenu(function(event) {
    event.preventDefault();
});

を阻止する

連結阻止操作

実際の開発では、一般的に泡の発生を阻止する行為とデフォルトの行為を阻止する行為を合併して書くが、合併の書き方は

でよい.

// event.stopPropagation();
// event.preventDefault();

//     ：
return false;

ページ弾枠例

イベントの委任
イベント依頼とは、バブルの原理を利用して、イベントを親レベルに追加し、イベントソースのサブセットを判断することによって、相応の操作を実行し、イベント依頼はまずイベントバインド回数を極めて減少させ、性能を高めることができる.次に、新しく追加されたサブ要素も同じ操作を持つことができます.

一般バインドイベントの書き方

$(function(){
    $ali = $('#list li');
    $ali.click(function(event) {
        $(this).css({background:'red'});
    });
})
...

    1
    2
    3
    4
    5

イベント依頼の書き方

$(function(){
    $list = $('#list');
    $list.delegate('li', 'click', function(event) {
        $(this).css({background:'red'});
    });
})
...

    1
    2
    3
    4
    5

キャンセルイベント依頼

// ev.delegateTarge     
$(ev.delegateTarge).undelegate();

//          $list.undelegate();

区間[-2^31,2^31]内の3つの整数A,B,Cを与え、A+BがCより大きいか否かを判断してください.

ZeptoソースのDataモジュールを読む