イベントを設定する(2)

同じ要素を二度取ってこないようにする

$(function(){
	$('#div1').click(function(){
		$('#div1').text('クリックされました');
	});
});


この記述には「$('#div1')」が二度書かれています。
それを変数を使って書き換えます。

$(function(){
	var element = $('#div1');
	element.click(function(){
		element.text('クリックされました');
	});
});
  • focus/blurの場合
$(function(){
	$('#input1').focus(function(){
		$('#input1').addClass('active');
	});
	$('#input1').blur(function(){
		$('#input1').removeClass('active');
	});
});


書き換え後は、

$(function(){
	var element = $('#input1');
	element.focus(function(){
		element.addClass('active');
	});
	element.blur(function(){
		element.removeClass('active');
	});
});
変数を使って無駄な処理を減らす
  • 変数に保存しておけば、ページの中に探しにいくのは「1回」

イベントとthis

  • 固有の要素をidで指定すると煩雑になる
イベントが発生した要素を取得する
  • thisはイベントが発生した要素が格納されます

《index.html》

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 〜</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="jquery-1.9.1.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div class="clickTest">div!</div>
<div class="clickTest">div!</div>
<div class="clickTest">div!</div>
<div class="clickTest">div!</div>
<div class="clickTest">div!</div>
</body>
</html>


《script.js》

$(function(){
	$('.clickTest').click(function(){
		$(this).text('クリックされました');
	});
});
  1. 5つのdivを取得してきて、jQueryオブジェクト化:$('.clickTest')
  2. これらにクリックイベントを設定。クリックされたら次の命令を実行:click(function(){})
  3. クリックされた要素をjQueryオブジェクト化:$(this)
  4. クリックされた要素中のテキストを変更:text('クリックされました');

$(DOM要素)

  • $(function(){});
  • $('セレクタ')
  • $('HTMLの断片')
  • $(DOM要素)
$(function(){});
  • $()にfunctionを入れた場合は「ページ読み込み完了時に実行されるコードを予約する」という動作
  • ページの読み込み完了イベント
$(function(){
	alert('このコードはページ読み込み完了時に実行される');
});
$('セレクタ')
  • $()に文字列を入れた場合は「セレクタ」として解釈され、取得してきた要素をjQueryオブジェクト化します
$('#somediv').css('border','3px solid red');
$('HTMLの断片')
  • $()にHTMLの断片を入れた場合は「要素」を作ることができます
$('<p>paragraph</p>').css('border','3px solid red');
$(DOM要素)
<body>
<div id="div1">divです。</div>
</body>
window.onload = function(){
	var div = document.getElementById('div1');
	div.style.fontSize = '50px';
};
$(function(){
	var div = $('#div1');
	div.css('font-size','50px');
});
$(this)
$(function(){
	$('.clickTest').click(function(){
		$(this).text('クリックされました');
	});
});

まとめ

  • イベントとは、何かが起こったときに初めてコードを実行させることのできる仕組み
  • 要素がクリックされたときに何かするには:click(function)
  • 要素にマウスがのったときに何かするには:mouseenter(function)
  • 要素からマウスがおりたときに何かするには:mouseleave(function)
  • mouseenter(function) + mouseleave(function) = hover(function,function)
  • 要素にフォーカスが当たったときに何かするには:focus(function)
  • 要素からフォーカスが外れたときに何かするには:blur(function)
  • 二度以上同じ要素を操作したいときには変数にjQueryオブジェクトを保存しておく
  • イベントハンドラのなかのthisはイベントが起こった要素
  • $(DOM要素)でjQueryオブジェクトを作ることができる