JavaScript 마우스 이벤트(mouse event)

Posted by ITPangPang
2016.11.13 17:05 웹(Web)/JavaScript


JavaScript 마우스 이벤트

(mouse event)



ㆍ JavaScript로 마우스 이벤트를 추가해보도록 하겠습니다


ㆍ 이벤트를 주기전에 먼저 js 파일을 html에서 따로 분리시키는

    작업을 먼저 하겠습니다.




먼저 JavaScript 파일을 외부파일로 분리


먼저,

JavaScript 파일을

 CSS파일 분리하는것처럼

따로 떨어트려놓겠습니다.


<body> 태그 안에 다음과 같이

써주시면 됩니다.


<script type="text/javascript" src="[파일명].js"></script>


src 부분만 잘 적어주시면 됩니다.

이렇게 적어주시고 실행을 하면


html이 코드를 분석하면서 src 부분을

tag 안쪽으로 넣어주는 효과가 있다고 합니다


<script type="text/javascript"> "[파일명].js"여기서 등록한 이벤트 실행</script>


<head>에 써줄 수도 있지만

body에 쓰는것이 속도면에서 효율적이라고 하네요

(또 head에 써주게 되면 onload 처리를 해줘야 하는 경우가 있어서

이 부분은 나중에 더 공부해서 써보도록 하겠습니다)




js 파일로 가서 원하는 이벤트를 주면 된다


테스트를 위해 화면에는

id="ex"가 부여된

hello 라는 글자를 찍어놨습니다.

css는 이런식으로 설정되어있습니다



그럼 이제 가장 기본인

마우스 클릭부터 시작해보겠습니다

('click');


먼저 js파일에서

id가 ex인 element를 찾아야합니다.

var ex = document.getElementById('ex');



찾은 후에 변수 ex에 담았습니다.


그 후에 ex라는 변수에 이벤트를

발생시키면 됩니다.


이벤트를 발생시키기 위해서

addEventListener를 달아주면서

클릭이벤트를 주기 위해 ('click")도

같이 적어줍니다.

var ex = document.getElementById('ex');

ex.addEventListener('click', function(){

    

})


그 다음 클릭을 했을때

원하는 결과를 적어주면 끝!


(잘 안보이시면 클릭하고 보시면 되여)


var ex = document.getElementById('ex');

ex.addEventListener('click',function(){

    ex.style.color = "black";

})


이렇게 써주시면 클릭했을때

ex의 css값으로 접근해서

color값(글자색깔)을

 black으로 변경시켜줍니다.



텍스트값을 변경시켜주려면

이렇게 하시면 됩니다.


var ex = document.getElementById('ex');

ex.addEventListener('click',function(){

    ex.innerHTML = "hi";

})



이번에는 마우스를

Text에 가져다대면

색깔을 바꿔보고

('mouseover')


클릭을 하면 "hi"로

바꾸는 코드를 해보겠습니다

('click')



var ex = document.getElementById('ex');


ex.addEventListener('mouseover',function(){

    ex.style.color = "blue";

})

ex.addEventListener('click',function(){

    ex.innerHTML = "hi";

})

이런식으로 하면 되겠죠?



코드는 이런식으로 짜주시면 됩니다

색깔, 글자 말고도

alert, confirm, prompt등 모두 가능합니다.



다른 마우스이벤트를 소개해보자면


mouseout

마우스가 엘리먼트를 벗어났을때


mousemove

마우스가 엘리먼트에서 움직일때


mousedown

마우스를 누르는 그 순간!

(click과는 다르게 press하는 순간입니다)


mouseup

down과 반대로 마우스를 누르고 있다가

손가락을 떼는 그 순간!



이 정도가 가장 기본적인

마우스 이벤트인것 같습니다


click

mouseover

mouseout

mousemove

mousedown

mouseup



끝!

저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로