（jQueryの学習）イベント：要素にイベントを埋め込む（その４）

2015年6月29日月曜日

（jQueryの学習）イベント：要素にイベントを埋め込む（その４）

in
本日は要素に組み込めるイベントの最終回です。

18.resize

説明windowの大きさが変更されたタイミングで発生
サンプルソース 
$(function() {
  // ↓他と異なり、windowでresizeイベントが捕捉できる
  $(window).resize(function(){
    // ・・・イベント発生後の処理・・・
  });
});
イベント発生源
（ブラウザのサイズを変えてください）
確認エリア※イベントが発生するとログが出力されます。

19.scroll

説明ドキュメントがスクロールしたタイミングで発生
サンプルソース 
$(function() {
  // ↓要素に対して捕捉するイベントを指定
  $("textarea").scroll(function(){
    // ・・・イベント発生後の処理・・・
  });
});
イベント発生源
確認エリア※イベントが発生するとログが出力されます。

20.select

説明type属性値が"text"のinput要素、
textarea要素のテキストが選択されたタイミングで発生
サンプルソース 
$(function() {
  // ↓要素に対して捕捉するイベントを指定
  $("input").select(function(){
    // ・・・イベント発生後の処理・・・
  });
});
イベント発生源
確認エリア※イベントが発生するとログが出力されます。

21.submit

説明フォームが送信されたタイミングで発生
サンプルソース 
$(function() {
  // ↓要素に対して捕捉するイベントを指定
  $("input").blur(function(){
    // ・・・イベント発生後の処理・・・
  });
});
イベント発生源
確認エリア※イベントが発生するとログが出力されます。

最後は
　resize、scroll、select、submit
の4本を学びました。

scrollイベントは、
今回、textarea要素で確認しましたが、
スクロールバーが出るような要素（div、windowなど）でも発生します。

また、resizeイベントは、
その２で学んだloadイベントと同じく、
window要素に対して働く点が他のイベントと異なります。

それでは、また。

Previous Post
Next Post

post written by: