イベントとは何ですか?
さまざまな訪問者に対するページの応答はイベントと呼ばれます。
イベント ハンドラーは、HTML で特定のイベントが発生したときに呼び出されるメソッドを指します。
例:
要素上でマウスを移動(dòng)します。
ラジオボタンを選択
要素をクリック
「トリガー」（または「起動(dòng)」）という用語は、「キーを押すとキープレスイベントが起動(dòng)する」などのイベントでよく使用されます。
一般的な DOM イベント:
| Event | 説明 |
|---|
click | このイベントは、マウスがクリックされたときにトリガーされます |
keypress | キーボードのキーが押されたときにトリガーされ、リリースされました |
submit | フォームが送信されたときにトリガー |
load | ページが読み込まれたときにトリガー |
dblclick | マウスのダブルクリックがトリガーされる |
keydown| | キーが押されたときにトリガーされますキーボードのキーが押された |
change | 現(xiàn)在の要素がフォーカスを失い、要素のコンテンツが変更されたときに発生します |
resize | ブラウザウィンドウのサイズが変更されたときに発生します |
mouseenter | 追加/トリガーキーボードのmouseenterイベント |
keyup | キーを押して放したときにトリガー |
focus | 要素がフォーカスを失ったときにトリガー |
scroll | スクロールイベントを追加/トリガー |
Mouseleave | MouseLeave イベントを追加/トリガーします |
blur | Blur イベントを追加/トリガーします |
jQuery イベント メソッドの構(gòu)文
jQuery では、ほとんどの DOM イベントに同等の jQuery メソッドがあります。
ページ上でクリック イベントを指定します:
$("p").click();
次のステップは、イベントがいつトリガーされるかを定義することです。これは、イベント関數(shù)を通じて実現(xiàn)できます:
$("p").click(function(){
// アクションがトリガーされた後に実行されるコード!!
});
一般的に使用される jQueryイベントメソッド
$(document).ready()
$(document).ready() メソッドを使用すると、ドキュメントが完全にロードされた後に関數(shù)を?qū)g行できます。このイベント メソッドは、jQuery 構(gòu)文の章で説明されています。
click()
click() メソッドは、ボタンのクリック イベントがトリガーされたときに呼び出される関數(shù)です。
この関數(shù)は、ユーザーが HTML 要素をクリックすると実行されます。
以下の例では、<p> 要素で click イベントがトリガーされると、現(xiàn)在の <p> 要素が非表示になります:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</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>如果你點(diǎn)我，我就會(huì)消失。</p>
<p>點(diǎn)我消失!</p>
<p>點(diǎn)我也消失!</p>
</body>
</html> プログラムを?qū)g行して試してみましょう
dblclick()
要素がダブルクリックされると、dblclick イベントが発生します。
dblclick() メソッドは、dblclick イベントをトリガーするか、dblclick イベントの発生時(shí)に実行する関數(shù)を指定します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</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>雙擊鼠標(biāo)左鍵的，我就消失。</p>
<p>雙擊我消失！</p>
<p>雙擊我也消失！</p>
</body>
</html>プログラムを?qū)g行して試してください
mouseenter()
マウス ポインターが通過したとき要素を介して、mouseenter イベントが発生します。
mouseenter() メソッドは、mouseenter イベントをトリガーするか、mouseenter イベントの発生時(shí)に実行する関數(shù)を指定します。要素の上でマウスボタンを押すと、mousedown イベントが発生します。
mousedown() メソッドは、mousedown イベントをトリガーするか、mousedown イベントの発生時(shí)に実行する関數(shù)を指定します。カーソルホバリングイベントをシミュレートするために使用されます。
マウスが要素上に移動(dòng)すると、指定された最初の関數(shù) (mouseenter) がトリガーされ、マウスが要素の外に移動(dòng)すると、指定された 2 番目の関數(shù) (mouseleave) がトリガーされます。 えープログラムを?qū)g行して試してください
focus()
要素がフォーカスを取得すると、focusイベントが発生します。
マウスをクリックして要素を選択するか、タブキーで配置すると、その要素にフォーカスが置かれます。
focus() メソッドは、フォーカス イベントをトリガーするか、フォーカス イベントが発生したときに実行される関數(shù)を指定します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("您的鼠標(biāo)移到了 id=p1 的元素上!");
});
});
</script>
</head>
<body>
<p id="p1">鼠標(biāo)指針進(jìn)入此處，會(huì)看到彈窗。</p>
</body>
</html>
現(xiàn)時(shí)點(diǎn)ではコースウェアはダウンロードできません?，F(xiàn)在スタッフが整理中です。今後もこのコースにもっと注目してください?
このコースを視聴した生徒はこちらも學(xué)んでいます
