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

2015年6月26日金曜日

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

in
本日も要素に組み込めるイベントの続きです。

11.mousedown

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

12.mouseenter

説明マウスが要素に入ったタイミングで発生
（子孫要素に入ったタイミングでは発生しない）
サンプルソース 
$(function() {
  // ↓要素に対して捕捉するイベントを指定
  $("input").mouseenter(function(){
    // ・・・イベント発生後の処理・・・
  });
});
イベント発生源
確認エリア※イベントが発生するとログが出力されます。

13.mouseleave

説明マウスが要素から外れたタイミングで発生
（子孫要素から外れたタイミングでは発生しない）
サンプルソース 
$(function() {
  // ↓要素に対して捕捉するイベントを指定
  $("input").mouseleave(function(){
    // ・・・イベント発生後の処理・・・
  });
});
イベント発生源
確認エリア※イベントが発生するとログが出力されます。

14.mousemove

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

15.mouseout

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

16.mouseover

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

17.mouseup

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

本日は
　mousedown、mouseenter、mouseleave、mousemove、mouseout、mouseover、mouseup
の7本を学びました。
mouse***イベントは、key***と同じくいくつか種類があり、
それぞれ発生するタイミングが違うので注意が必要です。

それでは、また。

Previous Post
Next Post

post written by: