jQueryイベント


jQuery は、イベント処理用に特別に設計されています。

イベントとは何ですか?

さまざまな訪問者に対するページの応答はイベントと呼ばれます。

イベント ハンドラーは、HTML で特定のイベントが発生したときに呼び出されるメソッドを指します。

例:

  • 要素上でマウスを移動します。
  • ラジオボタンを選択
  • 要素をクリック

「トリガー」（または「起動」）という用語は、次のようなイベントでよく使用されます。 「キーを押すと keypress イベントが発生します。」

一般的な DOM イベント:

マウス イベントキーボード イベントフォーム イベントドキュメント/ウィンドウ イベント
clickkeypresssubmitload
dblclickkeydown 変更サイズ変更
マウス入力キーアップフォーカススクロール
マウス離れる ぼかしアンロード

jQuery イベント メソッドの構文

jQuery では、ほとんどの DOM イベントに同等の jQuery メソッドがあります。

ページ上でクリック イベントを指定します:

$("p").click();

次のステップは、イベントがいつトリガーされるかを定義することです。これは、イベント関数を通じて実現できます:

$("p").click(function(){
// アクションがトリガーされた後に実行されるコード!!
});

一般的に使用される jQuery イベントメソッド

$(document).ready()

$(document).ready() メソッドを使用すると、ドキュメントが完全にロードされた後に関数を実行できます。このイベント メソッドについては、jQuery 構文 の章で説明されています。

click()

click() メソッドは、ボタンのクリック イベントがトリガーされたときに呼び出される関数です。

この関数は、ユーザーが HTML 要素をクリックすると実行されます。

以下の例では、<p> 要素でクリック イベントが発生すると、現在の <p> 要素が非表示になります:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>如果你点我，我就会消失。</p>
<p>点我消失!</p>
<p>点我也消失!</p>

</body>
</html>

「実行」をクリックする例" ボタンをクリックしてオンラインの例を表示します

dblclick()

要素がダブルクリックされると、dblclick イベントが発生します。

dblclick() メソッドは、dblclick イベントをトリガーするか、dblclick イベントの発生時に実行される関数を指定します。

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").dblclick(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>双击鼠标左键的，我就消失。</p>
<p>双击我消失！</p>
<p>双击我也消失！</p>

</body>
</html>

Run Instance»
[Run Instance] ボタンをクリックして、オンライン インスタンス

mouseenter ()

mouseenter イベントは、マウス ポインターが要素を通過するときに発生します。

mouseenter() メソッドは、mouseenter イベントをトリガーするか、mouseenter イベントの発生時に実行される関数を指定します。

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mouseenter(function(){
    alert("您的鼠标移到了 id=p1 的元素上!");
  });
});
</script>
</head>
<body>

<p id="p1">鼠标指针进入此处，会看到弹窗。</p>

</body>
</html>

インスタンスの実行»
[インスタンスの実行] ボタンをクリックして、オンライン インスタンス

mouseleave ()

mouseleave イベントは、マウス ポインターが要素から離れると発生します。

mouseleave() メソッドは、mouseleave イベントをトリガーするか、mouseleave イベントの発生時に実行される関数を指定します:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。");
  });
});
</script>
</head>
<body>

<p id="p1">这是一个段落。</p>

</body>
</html>

インスタンスの実行 »
「インスタンスの実行」ボタンをクリックして、オンラインインスタンス

mousedown()

Mousedown イベントは、マウス ポインターが要素上に移動し、マウス ボタンが押されると発生します。

mousedown() メソッドは、mousedown イベントをトリガーするか、mousedown イベントの発生時に実行される関数を指定します。

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
  });
});
</script>
</head>
<body>

<p id="p1">这是一个段落</p>

</body>
</html>

Run Instance»

[Run Instance] ボタンをクリックして、オンライン インスタンス

mouseup ()

mouseup イベントは、要素上でマウス ボタンが放されたときに発生します。

mouseup() メソッドは、mouseup イベントをトリガーするか、mouseup イベントの発生時に実行される関数を指定します。

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
  });
});
</script>
</head>
<body>

<p id="p1">这是一个段落。</p>

</body>
</html>

Run Instance»

[Run Instance] ボタンをクリックして、オンラインインスタンス

hover()

hover()メソッドは、カーソルホバーイベントをシミュレートするために使用されます。

マウスが要素上に移動すると、指定された最初の関数 (mouseenter) がトリガーされ、マウスが要素の外に移動すると、指定された 2 番目の関数 (mouseleave) がトリガーされます。

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").hover(function(){
    alert("你进入了 p1!");
    },
    function(){
    alert("拜拜! 现在你离开了 p1!");
  }); 
});
</script>
</head>
<body>

<p id="p1">这是一个段落。</p>

</body>
</html>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

focus()

要素がフォーカスを取得すると、focusイベントが発生します。

マウスをクリックして要素を選択するか、タブキーで配置すると、その要素にフォーカスが置かれます。

focus() メソッドは、フォーカス イベントをトリガーするか、フォーカス イベントの発生時に実行される関数を指定します。

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});
</script>
</head>
<body>

Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">

</body>
</html>

インスタンスの実行»

[インスタンスの実行] ボタンをクリックして、オンライン インスタンス

blur ()

blur イベントは、要素がフォーカスを失ったときに発生します。

blur() メソッドは、blur イベントをトリガーするか、blur イベントの発生時に実行される関数を指定します:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});
</script>
</head>
<body>

Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">

</body>
</html>

インスタンスを実行します »

「インスタンスを実行」ボタンをクリックして表示しますオンラインインスタンス


←