[JavaScript] jQuery のイベントを利用する

このページのタグ:[JavaScript] [jQuery]
jQuery のイベントを利用するコードを紹介します。イベントを利用するとセレクタで選択したオブジェクトにクリックなどのイベント動作を割り当てることができます。

Click イベント

クリックイベントに関してはこちらの記事を参照してください。

DoubleClick イベント

書式

(セレクタ).dblclick(イベント実行関数)
または
(セレクタ).dblclick(function(){
  ...クリック時に実行する処理
 })
と記述します。

コード


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script type="text/javascript" src="jquery-2.0.3.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("div.button").dblclick(function () {
        alert("ダブルクリックされました。");
      })
    })
  </script>
  <style>
    .button {
      border: solid 1px #0094ff;
      background-color: #e1e1e1;
      width:200px;
      height:32px;
    }
  </style>
</head>
<body>
  <div class="button">アイコンのつもりです。</div>
</body>
</html>

実行結果

上記のコードをWebブラウザで表示します。下図の画面が表示されます。


"アイコンのつもりです。"の枠をダブルクリックすると、下図のダイアログボックスが表示されます。

MouseUp MouseDown イベント

書式

MouseUp

(セレクタ).mouseup(イベント実行関数)
または
(セレクタ).mouseup(function(){
  ...クリック時に実行する処理
 })

MouseDown

(セレクタ).mousedown(イベント実行関数)
または
(セレクタ).mousedown(function(){
  ...クリック時に実行する処理
 })
と記述します。

コード

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script type="text/javascript" src="jquery-2.0.3.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("div.button").mousedown(function () {
        $("div#message").text("マウスのボタンが押されました。");
      })
      $("div.button").mouseup(function () {
        $("div#message").text("マウスのボタンがはなされました。");
      })
    })
  </script>
  <style>
    .button {
      border: solid 1px #0094ff;
      background-color: #e1e1e1;
      width: 200px;
      height: 32px;
    }
  </style>
</head>
<body>
  <div class="button">枠</div>
  <div id="message"></div>
</body>
</html>

実行結果

上記のHTMLファイルを表示します。下図の画面が表示されます。


[枠]にマウスのポインタを載せマウスボタンを押します。マウスボタンが押された旨のメッセージが表示されます。(下図)=

マウスのボタンを離すと、マウスボタンがはなされた旨のメッセージが表示されます。

MouseOver MouseOut イベント

書式

MouseOver

(セレクタ).mouseover(イベント実行関数)
または
(セレクタ).mouseover(function(){
  ...クリック時に実行する処理
 })

MouseOut

(セレクタ).mouseout(イベント実行関数)
または
(セレクタ).mouseout(function(){
  ...クリック時に実行する処理
 })
と記述します。

コード

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script type="text/javascript" src="jquery-2.0.3.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("div.button").mouseover(function () {
        $("div#message").html("枠内にポインタがあります。")
      })
      $("div.button").mouseout(function () {
        $("div#message").html("")
      })
    })
  </script>
  <style>
    .button {
      border: solid 1px #0094ff;
      background-color: #e1e1e1;
      width:200px;
      height:32px;
    }
  </style>
</head>
<body>
  <div class="button">枠です</div>
  <div id="message"></div>
</body>
</html>

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。


[枠]の内側にマウスポインタを移動します。枠にポインタが入ると"枠内にポインタがあります。"のメッセージが表示されます。


マウスポインタが枠の外側に出るとメッセージは非表示になります。


登録日 :2013-12-27    最終更新日 :2016-02-24
このページのタグ:[JavaScript] [jQuery]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)