@ PHP

event:イベント

JavaScript の DOM イベントはすべてメソッドとして用意されています。基本的な記述方法は次のようになります。

$(セレクタ).イベント名(実行したい function);

event_01.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <p><a href="#">Click me!</a></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
  $("a").click(function(){
    alert("リンクがクリックされました。")
  })
});
</script>
</body>

</html>

demo

on() という記述方法もあります。この方法はスクリプトで動的にイベントの種類を変更する場合に便利です。

要素が持つ、例えば ”click” などのイベントに対してコールバック関数を紐付けます。カスタムイベントに対しても on() 可能です。

event_02.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <p><a href="#">クリックしてください。</a></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
  $("p").on("click", function(){
    alert( $(this).text() )
  })
});
</script>
</body>

</html>

demo

$(this)は、イベントが発生した要素を取得するセレクターです。sample068.html での $(this) は click イベントが設定された p 要素を指します。

コールバック関数の使い方

JavaScript ステートメントは一行ずつ実行されます。しかし、エフェクトを使用すると、エフェクトが終了していない場合でも、次の行を実行できます。これでは、エラーが発生してしまいます。これを防ぐために、コールバック関数を作成します。

コールバック 関数は、現在の処理が終了した後に実行されます。

event_03.html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>sample</title>
<link rel="stylesheet" href="base.css">
</head>

<body>
  <p id="target">テキストテキスト</p>
  <p id="trigger">Click me!</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
  $("p#trigger").on("click", function(){
    $("p#target").hide("slow",function(){
      alert("この段落は現在非表示です。")
    })
  })
});
</script>
</body>

</html>

demo

イベントの解除

設定したイベントは解除することもできます。解除するには off() を使います。

event_04.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <p><a href="#">クリックしてください。</a></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
  $("a").on("click", function(){
    alert("リンクがクリックされました。")
  });
  $("a").off("click");
});
</script>
</body>

</html>

demo

1度だけ実行されるイベント

one() を使うことで、一度しか実行されないイベントを設定できます。

event_05.html

<!DOCTYPE html>
<html lang="ja">
 
<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <p><a href="#">クリックしてください。</a></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
  $("p").one("click",function(){
    alert("1回目がクリックされました。")
  })
});
</script>
</body>

</html>

demo

イベント設定 function() 内での this

click() などを使いイベントを設定する際、設定している要素ノードを参照したい場合があります。その場合は this を使います。this には要素ノードが設定されていますので、たとえば中身の HTML をテキストとして取得することもできます。

event_06.html

<!DOCTYPE html>
<html lang="ja">
 
<head>
  <meta charset="utf-8">
  <title>sample</title>
</head>

<body>
  <p><a href="#">クリックしてください。</a></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
  $("a").click(function(){
    alert(this.innerHTML)
    //alert($(this).text())
    //alert($(this)[0].innerHTML)
  })
});
</script>
</body>

</html>

demo

JavaScript での記述は次のようになります。

example

<body>
  <p><a href="#">クリックしてください。</a></p>
<script>
function func() {
  document.getElementsByTagName("a").item(0).onclick = function() {
    alert(this.innerHTML)
  }
}
func();
</script>
</body>