JS イベントを検出

イベントの記述

基本的な書き方

$('.セレクタ名').イベント名(function(){
  イベント発生時に行われる処理
});

マウスオーバー、マウスアウト

app.css

.box1 {
  background-color: #FF0000;
  height: 200px;
  width: 200px;
}

.box1-ext {
  border: 10px solid bladk;
}

app.js

$(function(){
  $('.box1').mouseover(function(){
    $('.box1').addClass('box1-ext');
  });
  $('.box1').mouseout(function(){
    $('.box1').removeClass('box1-ext');
  });
});

【解説】
マウスオーバー(mouseover)：要素の上にマウスカーソルを合わせた状態
マウスアウト(mouseout)：要素上にあるマウスカーソルを外した状態
addClass()：対象のHTML要素にclass属性を追加
removeClass()：要素に設定されているclass属性が解除される

マウスクリック

基本的な書き方

$('.セレクタ名').on('click',function(){
  イベント発生時に行われる処理
});

app.js

$(function(){
  $('.box1').on('click', function(){
    $('.box1').addClass('box1-ext');
  });
  $('.box1').mouseout(function(){
    $('.box1').removeClass('box1-ext');
  });
});