jQueryイベント
jQuery イベント
イベントとは何ですか?
さまざまな訪問者に対するページの応答はイベントと呼ばれます。
イベント ハンドラーは、HTML で特定のイベントが発生したときに呼び出されるメソッドを指します。
例:
要素上でマウスを移動します。ラジオ ボタンのクリック要素を選択します
「トリガー」(または「起動」) という用語は、「キーを押すと keypress イベントが起動する」などのイベントでよく使用されます。
イベントリスト。
1.blur() フォーカスが失われたときにトリガーされます。マウスのクリックによる終了と TAB キーによる終了を含みます。
2.change() 要素がフォーカスを取得すると、値が変化してフォーカスを失ったときにトリガーされます。
3.click() マウスがクリックされたときに発生します。
4.dblclick() マウスがダブルクリックされるとトリガーされます。
5.error() JavaScriptエラーが発生した場合、またはimgのsrc属性が無効な場合に発火されます。
6.focus() 要素がフォーカスを取得したときに発生します。注: 一部のオブジェクトはサポートされていません。
7.focusin() 要素またはそのサブ要素がフォーカスを取得したときにトリガーされます focus() との違いは、その内部のサブ要素がフォーカスを取得したときを検出できることです。
8.focusout() 要素またはそのサブ要素がフォーカスを失ったときにトリガーされます focusout() との違いは、内部のサブ要素がフォーカスを失ったときを検出できることです。
9.keydown() キーボードが押されたときにトリガーされます。
10.keyup() キーが離されたときに発生します。
11.mousedown() 要素上でマウスがクリックされたときに発生します。
12.mouseenter() マウスが要素の上を通過すると発生します。 Mouseenter と Mouseover の違いは、マウスが Mouseover の子要素の上を通過したときにもトリガーされますが、mouseenter はトリガーされないことです。
13.mouseleave() マウスが要素の外に出たときに発生します。
14.mousemove() マウスが要素上を移動すると発生します。 .clientX と .clientY はそれぞれマウスの X 座標と Y 座標を表します。
15.mouseout() マウスが要素から離れると発生します。
16.mouseover() マウスが要素内に移動したときに発生します。
17.mouseup() マウスの左ボタンを押して離したときに発生します。
18.resize() ブラウザウィンドウのサイズが変更されたときに発生します。 $(window).resize();
19.scroll() スクロールバーが変更されたときに発生します。
20.select() 入力内のコンテンツが選択されたときに発生します。
21.submit() 選択したフォームを送信します。
22.unload() ページがアンロードされるときにトリガーされます。
jQuery イベント メソッドの構文
jQuery では、ほとんどの DOM イベントに同等の jQuery メソッドがあります。
ページ上でクリック イベントを指定します:
$("p").click();
次のステップは、イベントがいつトリガーされるかを定義することです。これは、イベント関数を通じて実現できます:
$("p").click(function(){ // アクションがトリガーされた後にコードが実行されます!!});
一般的に使用される jQuery イベント メソッド
$(document).ready()
$(document).ready() メソッドを使用すると、ドキュメントが完全に読み込まれた後に関数を実行できます。このイベント メソッドは、jQuery 構文の章で説明されています。
click()
click() メソッドは、ボタンのクリック イベントがトリガーされたときに呼び出される関数です。
この関数は、ユーザーが HTML 要素をクリックすると実行されます。
以下の例では、<p> 要素で click イベントが発生すると、現在の <p> 要素が非表示になります:
<!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(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>点我我就不见了！</p>
<p>我们三个都是的！</p>
<p>他们说的是真的！</p>
</body>
</html>dblclick()
dblclick イベントは、要素がダブルクリックされると発生します。
dblclick() メソッドは dblclick イベントをトリガーするか、dblclick イベントの発生時に実行される関数を指定します:
<!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(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>双击鼠标左键的，我就消失。</p>
<p>双击我也消失！</p>
<p>双击我也是！</p>
</body>
</html>mouseenter()、mouseover() の比較:
<html>
<meta charset="utf-8">
<head>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$("div.over").mouseover(function(){
$(".over span").text(x+=1);
});
$("div.enter").mouseenter(function(){
$(".enter span").text(y+=1);
});
});
</script>
</head>
<body>
<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
</div>
</body>
</html>mouseleave()
はマウス ポインターが移動したときに発生します要素のmouseleaveイベントを終了します。
mouseleave() メソッドは、mouseleave イベントをトリガーするか、mouseleave イベントの発生時に実行する関数を指定します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</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 イベントの発生時に実行する関数を指定します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</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>mouseup()
要素上でマウス ボタンが離されると、mouseup イベントが発生します。
mouseup() メソッドは、mouseup イベントをトリガーするか、mouseup イベントの発生時に実行する関数を指定します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</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>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中文网(php.cn)</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 イベントの発生時に実行する関数を指定します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</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>
![フロントエンドプロジェクト-Shangyou [HTML/CSS/JS技術総合演習]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Apipost 実用化 [API、インターフェース、自動テスト、モック]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
