jQueryのイベント｜クリック・マウスオーバー・マウスアウトの指定

// DOM 構築後に実行
$(function() {
  // ボタンクリック
  $(".btn").on("click", function() {
    $(this).toggleClass("is-active");
  });

  // フォーム送信
  $("form#contact").on("submit", function(e) {
    if (!$("#name").val()) {
      e.preventDefault();    // 送信中止
      alert("名前は必須です");
    }
  });
});

$(".list a").on("click", function(e) {
  // this: イベント発生元の生 DOM 要素
  const $a = $(this);

  // e: イベントオブジェクト
  e.preventDefault();   // 既定動作キャンセル (リンク遷移)
  e.stopPropagation(); // 親へのイベント伝播を止める

  console.log(e.type, e.target, e.currentTarget, e.pageX, e.pageY);
});

// .list の中の .item へのクリックを委任
$(".list").on("click", ".item", function() {
  $(this).addClass("selected");
});

// document 全体に委任 (最後の手段)
$(document).on("click", ".dyn", function() { ... });

$(".btn").trigger("click");      // 全イベント連鎖を含めて発火
$(".btn").triggerHandler("click"); // ハンドラのみ呼ぶ (既定動作・伝播なし)