Event - click 이벤트, mouseenter, mouseleave 이벤트

*많이 쓰는 Event 종류

이벤트 명	설명
click	클릭시 발생
change	input 요소의 변동이 있을 때
mouseover	마우스가 특정 객체 위에 올려졌을 때
mouseout	마우스가 특정 객체 밖에 나갔을 때
mouseenter	마우스가 특정 객체 안에 들어왔을 때
mouseleave	마우스가 특정 객체에서 떠났을 때

 

 

 

*click

html의 button태그에 있는 id명 submit에 적용.


문법
btn.addEventListener('click', function(){ });
---------------------------------------------

var btn = document.getElementById('submit');

btn.addEventListener('click', function(){
	btn.style.color = 'red';
	console.log('버튼 동작함');
});


작동
웹화면에 클릭버튼을 누르면 빨간색으로 바뀌고 콘솔로그에 '버튼 동작함'도 출력됨

 

 

 

*mouseenter , mouseleave

html에 있는 class명 container에 적용


문법
1.mouseenter
btn.addEventListener('mouseenter', function(){ });

2.mouseleave
btn.addEventListener('mouseleave', function(){ });
---------------------------------------------


활용

var container = document.querySelector('.container');

btn.addEventListener('mouseenter', function(){
    console.log('버튼 들어옴');
})

btn.addEventListener('mouseleave', function(){
    console.log('버튼 나감');
})


작동

웹화면에 있는 버튼 위로 마우스가 올라가면 콘솔로그에 '버튼 들어옴' 이 출력
마우스가 버튼 위에서 벗어나면 콘솔로그에 '버튼 나감' 이 출력

 

 

*keycode - 웹창에서 어떤 키보드를 눌렀을때 키 코드를 알수있다.

window.addEventListener('keydown', function(event) {
    console.log(event.key);
    console.log(event.keyCode);
});


값
왼쪽 방향키와 오른쪽 방향키, esc 키를 눌렀을때

ArrowLeft 
37                  //왼쪽 방향키의 키값 - 37

ArrowRight 
39                  //오른쪽 방향키의 키값 - 39

Escape
27                  //ESC의 키값 - 27