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>

学び続ける

新しいファイル

<!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>

リセットコード

自動運転

提出する

プレビュー Clear