jquery onメソッド

TOPページに戻る > jquery入門

スポンサード リンク

jquery on()メソッド

onメソッドは、セレクタで指定した要素に1つ以上のイベントが呼ばれたときの処理を関連付けます
.bind()、.live()、.delegate()といったイベントAPIをまとめた機能をもったメソッドです
イベント名はclick、dblclick、mousedown、mouseup、mouseover、mouseout、mousemove、mouseenter、mouseleave、blur、focus、load、resize、scroll、unload、change、select、submit、keydown、keypress、keyup、errorで指定します

bind()の機能。要素をイベントすると処理を実行する

$("セレクタ").on("イベント名",function(){処理});

live()の機能。引数は3つ。第二引数のセレクタを第一引数のイベントすると第3引数の処理を実行する
document内のセレクタ全てに働きかけるので負荷が高い

$(document).on("イベント名,"セレクタ",function(){処理});

delegate()の機能。引数は3つ。第二引数のセレクタを第一引数のイベントすると第3引数の処理を実行する
対象セレクタを限定できるため負荷が軽い

$("セレクタ").on("イベント名,"セレクタ",function(){処理});

第3引数のデータをイベントハンドラに渡す

$("セレクタ").on("イベント名,"セレクタ",データ,function(){処理});

指定したHTML要素をクリックしたときにイベントを実行する

セレクタで指定したHTML要素をクリックしたときに他のテキストが変更されます。クリックして下さい

jquery

$(function() {
	$("#button").on('click',function(){
	$("#hoge").text("クリックされました");
	});
});
css
#hoge{
 border: 1px solid;
 padding: 10px;
 }

html

<button id="button">ボタン</button>
<div id="hoge">テキスト</div>

サンプル

テキスト

要素を限定してイベントを実行する

セレクタで指定したHTML要素の中のbutton要素に限定してイベントを実行します
delegate()の機能です。動的に追加された要素からでも処理を実行できます

jquery

$(function() {
	$("#box").on("click","button",function(){
    $(this).after("<br><button>出現した要素からもイベント実行できます</button>");
    });
});
css
#hoge{
 border: 1px solid;
 padding: 10px;
 }

html

<div id="box">
<button>ボタン</button>
</div>

サンプル









(C)2012 ホームページ作成無料