JQueryの頻出イベント

<button id="js-btn">ボタンクリックでアラートが出る</button>

const btn = $("#js-btn");
btn.click(function () {
  alert('クリックされました！');
});

<button id="js-btn">ボタンダブルクリックでアラートが出る</button>

const btn = $('#js-btn');
const box = $('.box');

btn.dblclick(function () {
  alert('ダブルクリックされました');
});

<button id="js-btn-down">mousedown!</button>

const btnDown = $('#js-btn-down');
btnDown.mousedown(function () {
  console.log('down');
});

<button id="js-btn-up">mouseup!</button>

const btnUp = $('#js-btn-up');
btnUp.mouseup(function () {
  console.log('up');
});

 <button id="js-more">右クリック！</button>

const more = $('#js-more');

more.contextmenu(function () {
  alert('ok');
});

<div class="box" id="js-box">mousemove</div>

.box {
  width: 200px;
  height: 200px;
  background: orange;
}

.add {
  width: 100px;
  height: 100px;
  background: red;
  margin-bottom: 10px;
}

const box = $('#js-box');
box.mousemove(function () {
  box.append('<div class="add">add!<div>')
});

<div class="box" id="js-box">mouseover</div>

.box {
  width: 200px;
  height: 200px;
  background: orange;
}

.change-blue {
  background: blue;
}

const box = $('#js-box');

box.mouseover(function () {
  box.addClass('change-blue');
});

<div class="box" id="js-box">mouseout</div>

<div class="hover" id="js-hover">hover</div>

.box,.hover {
  width: 200px;
  height: 200px;
  background: orange;
}

.change-green {
  background: green;
}

const box = $('#js-box');
const hov = $('#js-hover');

box.mouseover(function () {
  box.addClass('change-green');
});

box.mouseout(function () {
  box.removeClass('change-green');
});

// hoverイベント
hov.hover(
  function() {
    hov.css('background', '#ff0');
  },
  function() {
    hov.css('background', '#09c');
  }
);

 <div class="box" id="js-box"></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="main.js"></script>

.box {
  width: 200px;
  height: 200px;
  cursor: pointer;
  background: orange;
}

const box = $('#js-box');

box.mouseenter(function () {
  alert('ok');
});

<div class="box" id="js-box"></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="main.js"></script>

.box {
  width: 200px;
  height: 200px;
  cursor: pointer;
  background: orange;
}

box.mouseleave(function () {
  alert('mouseleave');
});

<div class="box" id="js-box"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>

.box {
  width: 200px;
  height: 200px;
  cursor: pointer;
  background: orange;
}

const box = $("#js-box")
$(function () {
  box.hover(
    function () {
      $(this).css('background', 'red');
    },
    function () {
      $(this).css('background', 'orange');
    }
  )
});

<div class="box" id="js-box">touch!</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>

.box {
  width: 200px;
  height: 200px;
  background: orange;
}

const box = $('#js-box');

box.on("touchstart", function () {
  box.css('background', "red");
});

<div class="box" id="js-box">touch!</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>

.box {
  width: 200px;
  height: 200px;
  background: orange;
}

const box = $('#js-box');
box.on("touchend", function () {
  box.css('background', "blue");
});

<div class="box" id="js-box">タップしたまま指を移動！</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="main.js"></script>

.box {
  width: 200px;
  height: 200px;
  background: orange;
}

const box = $('#js-box');
box.on("touchmove", function () {
  alert('touchmove');

});

<input type="text" placeholder="focus">

$("input").focus(function () {
  console.log("focus!");
});

<input type="text" placeholder="blur">

$("input").blur(function () {
  console.log("blur!");
});

<input type="text" placeholder="focusin">

$("input").focusin(function () {
  console.log("focusin!");
});

<input type="text" placeholder="focusout">

$("input").focusout(function () {
  console.log("focusout!");
});

<input type="text" placeholder="文章を入力する">

$('input').change(function () {
  $('input').css('background', 'red');
});

<form action="">
  <button type="submit">送信</button>
</form>

$('form').submit(function () {
  alert('submit!');
});

<input type="text" placeholder="テキストを入力する">
<p>keydown:<span class="keydown"></span></p>

$("input").keydown(function (e) {
  const key = e.keyCode;
  $(".keydown").text(key);
});

<input type="text" placeholder="テキストを入力する">
<p>keypress:<span class="keypress"></span></p>

$("input").keypress(function (e) {
  const key = e.keyCode;
  $(".keypress").text(key);

});

<input type="text" placeholder="テキストを入力する">

<p>keyup:<span class="keyup"></span></p>

$("input").keyup(function (e) {
  const key = e.keyCode;
  $(".keyup").text(key);

});

<div class="scroll-area">
  <div class="box"></div>
</div>

.scroll-area {
  overflow: scroll;
  height: 200px;
  border: 1px solid black;
  width: 50%;
}

.box {
  width: 200px;
  height: 200px;
  background: orange;
  margin: 20px;
}

$('.scroll-area').scroll(function () {
  console.log("scroll!");

});

$(window).resize(function () {
  console.log("resize!");

});

$(document).ready(function () {
  console.log("ready!");

});

$(window).on("load", function () {
  console.log("load!");

});

$(window).on("unload", function () {
  console.log("unload!");

});

<div class="imgbox">
    <img src="" alt="">
</div>
<button>click!</button>

$("button").click(function () {
  $("img").on("error", function () {
    console.log("画像が読み込まれませんでした");

  }).attr("src", "dummy.png");
});

<button id="js-btn">ボタンクリックでアラートが出る</button>