onkeypress,onkeyup,onkeydown
onkeypress (keyCode값): 키보드를 눌렀을때
onkeyup (keyCode값): 키보드를 눌렀다가 땠을때
onkeydown (ASCII값): 키보드를 눌렀을때
예시)
문자열 입력 <input type="text" id="txtMsg" onkeyup="showText(event)">
<div id="result"></div>
<div id="pos"></div>
<script>
function(e){
console.log(e.keyCode);
}
</script>누르는 키값이 xonsole에 뜬다.
onmouseover,onmouseout,onmousemove
onmouseover 이미지위에 마우스가 올라가면 백그라운드 속성을 준다.
onmouseout 이미지에서 마우스가 벗어나면 백그라운드 속성 원위치 한다.
onmousemove 마우스가 이동하는 위치를 나타낸다.
onmousemove 예시)
<div id="pos"></div>
<div id="box"
style="width:400px;
height:300px;
border:2px solid green"
onmousemove="showXY(event)">
</div>
<script>
function showXY(e) {
var x=e.clientX;
var y=e.clientY;
document.getElementById("pos").innerHTML="x:"+x+",y"+y;
}
</script>
x값과 y값이 표시된다.
onmouseover,onmouseout예시)
<div id="imgbox">
<img src="경로/이름.png"
onmouseover="addBorder(event)"
onmouseout="removeBorder(event)">
<img src="경로/이름.png"
onmouseover="addBorder(event)"
onmouseout="removeBorder(event)">
<img src="경로/이름.png"
onmouseover="addBorder(event)"
onmouseout="removeBorder(event)">
</div>
<script>
function addBorder(e) {
var img=e.target;//이벤트 발생된 객체
img.style.background="orange";
}
function removeBorder(e) {
e.target.style.background="none";
}
function border() {
var imgbox=document.getElementById("imgbox");
imgbox.style.border="3px solid red";
}
</script>마우스를 올리면 백그라운드가 오렌지색상으로 바뀌고 마우스가 사진을 벗어나면 원래색상으로 돌아온다.
onclick
사용자가 클릭을 하면 자바 스크립트가 실행된다.
예시)
<style type="text/css">
*{
margin: 0px;
padding: 0px
}
#box{
top: 200px;
left: 200px;
width: 500px;
height: 500px;
overflow: hidden;
position: absolute;
border: 2px solid green;
}
#img1{
left: 100px;
top: 100px;
position: absolute;
}
</style>
<body onload="setXY()">
<div id="box" onclick="imgXY(event)">
<img src="images/1.png" id="img1">
</div>
</body>
<script type="text/javascript">
function setXY() {
var img1=document.getElementById("img1");
img1.style.width="100px";
img1.style.height="100px";
}
function imgXY(e) {
var x=e.clientX;
var y=e.clientY;
var img1=document.getElementById("img1");
var w=parseInt(img1.style.width)/2;
var h=parseInt(img1.style.height)/2;
var box=document.getElementById("box");
var offsetX=box.offsetLeft;
var offsetY=box.offsetTop;
console.log(offsetX+","+offsetY)
img1.style.left=(x-w-200)+"px";
img1.style.top=(y-h-200)+"px";
}
</script>
1.초록색 네모칸안에 클릭을 하면 이미지가 클릭한 위치로 이동되게 만들었다.
2.e.clientX와e.clientY의 이벤트가 발생한 수평과 수직의 좌표값을 가져옴
3.이미지의 값이 바뀔수있기때문에 parseInt를 사용해서 정로 변환
4.박스가 왼쪽과 위로부터 200px이 떨어져있기 때문에 offsetX=box.offsetLeft,
offsetY=box.offsetTop 으로 화면상의 x,y축에서 떨어진만큼 위치를 얻어옴
5.이미지를 왼쪽과 위에서부터 떨어지는 px구함
=이렇게 하면 클릭했을때 이미지가 중간에 위치한다.
addEventListener
형식-
addEventListener('이벤트명',호출될함수명)
예시)
<body>
<input type="button" value="클릭1" id="btn1">
<input type="button" value="클릭2" id="btn2">
</body>
<script type="text/javascript">
var btn2=document.getElementById("btn2");
btn2.onclick=showMsg;
var btn1=document.getElementById("btn1");
btn1.addEventListener('click',showMsg);
btn1.addEventListener('click',func1);
function showMsg() {
alert("버튼클릭");
}
function func1() {
alert("button click!!");
btn1.removeEventListener('click',func1);
}
</script>
var btn2=document.getElementById("btn2");
btn2.onclick=showMsg;
위에 코드는 이벤트 연결을 하나만 하지만 addEventListener는 이벤트를 여러개 입력이 가능하고 삭제가 가능하다.
주의할점은 addEventListener의 호출될 함수명에 ()를 붙여서 사용하면 안된다 ()를 붙여서 사용할경우 이벤트가 발생하기전에 함수가 먼저 실행되기 때문이다.
