Keyboard Mouse Event

Keyboard Event

onKeyPress (event.returnValue = false)

<input type="text" name="test" onKeyPress="enter(this)"> 

function enter_sub(field) {
  if (event.keyCode == 13) {
    alert('\n엔터키입력!\n\n');
    return true;
  }else{
    alert('\n엔터키미입력!\n\n');
    return false;
  }
}

이런식으로 되는데 이때 os나 키보드세팅에 따라 바로 submit이 된다는 것입니다. form문의 모든 submit을 다 죽여보았는데도 그런 현상이 발생되더군여.. 그래서 사용한 것이

event.returnValue = false; 입니다.
return false; 대신 event.returnValue = false 을 사용하니 submit이 되지 않더군여..

Mouse Event

onclick

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

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

mouseenter && mouseleave

사용법

<div onmouseleave ="func()"> // 엘리먼트에 바로 적용
element.onmouseleave = function(){func()}; 
element.addEventListener("mouseleave", func);

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

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. onmouseleave

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>