jQueryのイベント

以下のページでjQueryやDOMについて学んでいます。 www.mojage.club

本記事は、jQueryのイベントについて纏めています。

Sponsored Link

イベント

.ready()

jQuery(document).ready()とする際に使われる.ready()ですが、これはドキュメントに対してだけではなく、任意の要素に対して使用することが出来ます。

イベントの追加/削除

.bind()でイベントを設定し、.unbind()でイベントを無効化します。指定できるトリガーは以下。

  • blur
  • focus
  • load
  • resize
  • scroll
  • unload
  • beforeunload
  • click
  • dblclick
  • mousedown
  • mouseup
  • mousemove
  • mouseover
  • mouseout
  • change
  • select
  • submit
  • keydown
  • keypress
  • keyup
  • error
<input type="text" value="click me" />
<button>remove events</button>

~~~

  // イベント設定
  $('input').bind('click', function(){
    alert('You clicked me!');
  });

  $('input').bind('focus', function(){
    alert('You focused this input!');
  });

  // イベントの無効化
  $('button').click(function(){
    $('input').unbind('click');
    $('input').unbind('focus');

    // Or
    // $('a:first').unbind();
  });

トリガーの名前空間

イベントトリガーを修正や削除したい時に、同じトリガーの内、任意のトリガーのみを変更する場合はユニークな名前空間を設定することが出来ます。

  //一般的なresizeトリガー
  $(window).bind('resize', function(){ alert('I have no namespace');});

  //resize.uniqueという名前空間で定義したイベント
  $(window).bind('resize.unique', function(){ alert('I have a unique namespace');});
  
  // 名前空間でしていされたイベントのみを無効化
  $(window).unbind('resize.unique')

<ul>
  <li><a href="#">remove</a></li>
  <li><a href="#">remove</a></li>
  <li><a href="#">remove</a></li>
  <li><a href="#">remove</a></li>
  <li><a href="#">remove</a></li>
  <li><a href="#">remove</a></li>
</ul>

~~~
  //ul要素内でクリックされた要素をeventに渡す
  $('ul').click(function(event){ 

    // .targetプロパティで渡された要素のDOM<a>を選択する
    $(event.target).parent().remove(); // 親要素の<li>が消される
    return false; // ブラウザのデフォルトの挙動を止めるために使用
  });

.live()

.live().bind()と違い、イベント実行後に新たに生成されたDOM要素に対しても自動的に設定するイベントを定義できます。

<button>Add another Button</button>

~~~

  $('button').live('click',function(){
    $(this).after("<button>Add another Button</button>");
  });

親要素への伝搬を止める

<p><span>stop</span></p>

~~~

  $('p').click(function(){alert('this is a p.');});

  $('span').click(function(event){
    alert('this is a span');

     //この.stopPropagation()をコメントアウトするとイベントは親要素の<p>へ伝搬される
    event.stopPropagation(); 
  });

カスタムイベントトリガーの作成

.bind()でカスタムイベントトリガーを定義して、.trigger()で使用できます。

<div>jQuery</div>

~~~

  $('div').bind('myCustomEvent', function(){
    window.location = 'http://www.jquery.com';
  });

  $('div').click(function(){
    $(this).trigger('myCustomEvent');
  });

イベントごとDOM要素をクローンする

.cloneを使用するとDOM要素のクローンが行なえますが、この時trueを渡すとイベントごとクローンがおこなえます。

<a href="#" class="clone">Add another Link</a>

~~~

  $('button').click(function(){
    var $this = $(this);
    $this.clone(true).insertAfter(this); // イベントごとクローン
  });

  $('.clone').click(function(){
    var $this = $(this);
    $this.clone().insertAfter(this); // イベントはクローンしない
  });

マウスポインタの座標取得

  $(document).mousemove(function(e){
    // e.pageX - X座標
    // e.pageY -  Y座標
    $('body').html('e.pageX = ' + e.pageX + ', e.pageY = ' + e.pageY);
  });

マウスの座標を任意の要素内で取得したい場合

<div style="margin:200px;heigth:100px;width:100px;background:#ccc;padding:20px">
  relative to this
</div>

~~~

  $('div').mousemove(function(e){
    var relativeX = e.pageX - this.offsetLeft;
    var relativeY = e.pageY - this.offsetTop;
    $(this).html('releativeX = ' + relativeX + ', releativeY = ' + relativeY);
  });

Reference from : jQuery Enlightenment