JavaScript 마우스 이벤트(mouse event)
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
끝!
'웹(Web) > JavaScript' 카테고리의 다른 글
| getElementById() + 요소,태그,속성,속성값이란 (1) | 2016.08.01 |
|---|---|
| prompt를 써보자 (1) | 2016.07.30 |
| confirm을 써보자 (0) | 2016.07.22 |
| JavaScript에서 document.write를 써보자 (0) | 2016.06.23 |
| JavaScript alert 사용해서 Hello World 띄우기 (0) | 2016.06.19 |