jqueryイベントまとめ

jqueryのイベント

$('.btn').on('click', function(e) {
   alert('click');
});

onメソッドのイベントハンドラに引数を指定すると、発生したイベントの情報などが入ってるイベントオブジェクトが入っています。

イベントオブジェクトが持つ、preventDefaultメソッドを使いページ遷移などのイベントを止めることができます。

e.preventDefault();

イベントオブジェクトが持つtargetプロパティで、イベント発生元の要素にアクセスすることができます。

$('.btn').on('click', function(e) {
    $(e.target).next().css({ 'color': 'red' });
});

input要素やtextarea要素へ入力することでinputイベントが発生します。

inputイベントにイベントハンドラを登録することで、文字が入力されるたびに処理を実行できます。

$('.input').on('input', function(e) {
    var val = $(e.target).val();
    console.log(val);
});

submitイベントはフォーム送信時に発生します。

<form class="form" action="" method="post">
　　　　<input type="submit" value="送信">
</form>

$('.form').on('submit', function(e) {
    // ページ遷移ストップ
    e.preventDefault();
});