jQuery 「イベント」マウスクリック

jQuery1.7で.on()メソッドが追加され、イベントとイベントハンドラを結び付ける処理はこの「.on()」を使うことが推奨されるようになりました。.on()の第1引数に「click」を指定することで、マウスのクリックをトリガーとしてイベントが起動します。クリックイベントは、厳密に言うと「マウスカーソルが対象要素の上にあり、ボタンが押され、離されたとき」に発生します。対象となるHTML要素には制限はなく、どの要素でもclick()イベントハンドラを結び付けられます。引数なしの.click()メソッドは、「trigger(‘click’)」の短縮形です。こちらは、ユーザー操作にかかわらず強制的にクリックイベントを発生させます。

書式

$(対象要素).on('click', function(e){処理…})
$(対象要素).trigger('click')
$(対象要素).click()
$('#button').on('click',function(e){
   alert('clicked');
});
$('a').trigger('click');
$('a').click();

サンプル

1、リンクをクリックしたらアラートを表示し、画面遷移はキャンセルする

<body>
    <div class="main">
      <div class="header">
        <h1> サンプル </h1>
      </div>
      <div class="content">
        <p class="desc"><a href="https://example.com">クリックしてください。</a>
      </div>
      <div class="footer">
        <hr>
        <p class="copyright">2024 xxxx all rights reserved.</p>
      </div>
    </div>
    <script>
      $(document).ready(function(){
       $('a').on('click',function(){
        alert('リンクがクリックされました');
        e.preventDefault();
        e.stopPropagation();
       });
      });
    </script>
 </body>
実行結果
実行結果

2、ドキュメントロードと同時に、clickイベントを発生させる

<html>
      <head>
        <meta charset="UTF-8">
        <title>テストページ</title>
        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
        <style>
          .sticky{
            width: 400px;
            background-color: aquamarine;
          }
          .sticky3{
            background-color: rgb(189, 169, 82);
          }
        </style>
  </head>
  <body>
    <div class="main">
      <div class="header">
        <h1> サンプル </h1>
      </div>
      <div class="content">
        <div class="sticky">
        <p>冷蔵庫の賞味期限を確認する</p>
        </div>
        <div class="sticky">
        <p>豚に餌をあげる</p>
        </div>
        <div class="sticky">
        <p>制服をクリーニングに出す</p>
        </div>
        <div class="sticky">
        <p>おじいちゃんに電話する</p>
        </div>
      </div>
      <div class="footer">
        <hr>
        <p class="copyright">2019 xxxx all rights reserved.</p>
      </div>
    </div>
    <script>
    $(document).ready(function(){
      $('.sticky').on('click', function(){
        $(this).removeClass('sticky');
        $(this).addClass('sticky3');
      });
    });
    $('.sticky:first').trigger('click');
    $('.sticky:last').trigger('click');
    </script> 
    </body>
</html>
実行結果
初期画面
実行結果
要素をクリックした後