Mouse Event

• onclick: 마우스를 클릭했을때 이벤트 발생
• onmouseenter: element 상에 마우스 포인트가 진입했을 때 이벤트 발생
• onmouseleave: element 를 마우스 포인트가 벗어날때 경우 이벤트 발생
• onmousemove: element상에서 마우스 포인트가 움직일때 연속적으로 발생
• onmouseout: element에 하위 element들이 존재할때 하위 element를 벗어날때도 이벤트가 발생()
• onmouseover: onmousemove와 비슷하나 하위요소들이 존재할때 하위 요소에 진입할때 마다 발생

사용법

<div onmouseover="style.background = '#FCFBF1'"> // html 상에서 바로 적용
<div onmouseleave ="func()"> // html상에서 정의된 함수 호출
element.onmouseleave = function(){func()}; // 자바스크립트로 엘리먼트에 적용
element.addEventListener("mouseleave", func);

onclick

마우스를 클릭했을때 이벤트 발생

 onclick="window.open('url', '', '');"

onmouseenter && onmouseleave

텍스트위에 마우스를 가져가면 색상이 변경되는 예제

• js

function mouseEnter() {
  document.getElementById("sample").style.color = "red";
}

function mouseLeave() {
  document.getElementById("sample").style.color = "blue";
}

• html

<p id="sample" onmouseenter="mouseEnter()" onmouseleave="mouseLeave()"> 
  세상의 모든 재미나는 이야기 - onstory.fun (이곳에 마우스 오버)
</p>

See the Pen 스크롤을 따라 움직이는 레이어 by younghyeong ryu (@wangta69) on CodePen.

onmousemove vs. onmouseleave vs. onmouseout

js

var x = 0;
var y = 0;
var z = 0;

function onMouseMove() {
  document.getElementById("demo1").innerHTML = z+=1;
}

function onMouseLeave() {
  document.getElementById("demo2").innerHTML = x+=1;
}

function onMouseOut() {
  document.getElementById("demo3").innerHTML = y+=1;
}

css

#samples {
  display: flex;
}

#samples > div {
  border: 1px solid gray;
  padding : 10px;
  marin : 10px;
}

html

<div id="samples">
  <div onmousemove="onMouseMove()">
    <p>마우스포인터가 div 요소 위에서 움직일 때마다 발생</p>
    <p>event occur: <span id="demo1"></span></p>
    <p>onmousemove</p>
  </div>
  <div onmouseleave="onMouseLeave()">
    <p>마우스포인터가 안에서 div 요소 밖으로 나갈 때만 발생</p>
    <p>event occur: <span id="demo2"></span></p>
    <p>onmouseleave </p>
  </div>
  <div onmouseout="onMouseOut()">
    <p>마우스포인터가 div 및 해당 하위요소 (p 및 span)에서 나갈 때도 발생.</p>
    <p>event occur: <span id="demo3"></span></p>
    <p>onmouseout</p>
  </div>
</div>

See the Pen MouseEvent - onmouseleave - color change by younghyeong ryu (@wangta69) on CodePen.

onmouseover & onmouseout

마우스 over 및 oust 시 style을 이용하여 색상을 변경하는 예제입니다.

<div onmouseover="style.background = '#FCFBF1'" onmouseout="style.background = '#FFFFFF'"> <div>