【8/27まで】Udemyの人気コースが今なら1,200円から!!

【JavaScript入門】mouseover・mouseoutとmouseenter・mouseleaveの違い

【JavaScript入門】mouseover・mouseoutとmouseenter・mouseleaveの違い

mouseoverとmouseoutの場合

See the Pen
mouseoverとmouseout
by shiakisudev (@shiakisu)
on CodePen.

HTML

<div id="parent">
  <div id="child">
  </div>
</div>
<div id="output"></div>

CSS

#parent{
  width:300px;
  height:300px;
  background-color:pink;
  display:flex;
  justify-content:center;
  align-items: center;
}

#child{
  width:150px;
  height:150px;
  background-color:skyblue;
}

js

let output = document.getElementById("output");
let cnt = 0;
document.getElementById("parent").addEventListener('mouseover',function(e){
  output.innerHTML+=`${++cnt}:入りました。<br>`;
},false);

document.getElementById("parent").addEventListener('mouseout',function(e){
  output.innerHTML+=`${++cnt}:出ました。<br>`;
},false);

mouseenterとmouseleaveの場合

See the Pen
mouseenterとmouseleave
by shiakisudev (@shiakisu)
on CodePen.

HTML

<div id="parent">
  <div id="child">
  </div>
</div>
<div id="output"></div>

CSS

#parent{
  width:300px;
  height:300px;
  background-color:pink;
  display:flex;
  justify-content:center;
  align-items: center;
}

#child{
  width:150px;
  height:150px;
  background-color:skyblue;
}

js

let output = document.getElementById("output");
let cnt = 0;
document.getElementById("parent").addEventListener('mouseenter',function(e){
  output.innerHTML+=`${++cnt}:入りました。<br>`;
},false);

document.getElementById("parent").addEventListener('mouseleave',function(e){
  output.innerHTML+=`${++cnt}:出ました。<br>`;
},false);

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です