[javascript 15강] 이벤트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            function divClick(ob){
                ob.style.backgroundColor = "green";
            }
        </script>
    </head>
    <body>
        <div style="width: 100px; height: 100px; background-color: black;" onclick="divClick(this);"></div>
    </body>
</html>
Colored by Color Scripter
cs

실행결과 및 설명

처음 화면에서는 검은색 div 출력됩니다.

검은색 div 를 클릭하면..

이렇게 초록색 div로 바뀌게 됩니다.

그럼 코드를 리뷰해 보겠습니다.

위와같은 스타일을 가진 div 안에 onclick (클릭이 일어나면 실행) 이라는 속성을 넣어주고..

함수 divClick 을 넣어준후에 매개변수 this 를 넘겨주었습니다.

즉, 한번클릭하면 divClick 함수가 실행되고..

this인 div 객체를 함수에 매개변수로 넘겨줍니다.

            function divClick(ob){

                ob.style.backgroundColor = "green";

}

스크립트 영역에 divClick 이라는 함수를 만들어주었고.. 매개변수 ob 를 받게 하였습니다.

ob.style.backgroundColor = "green";

매개변수로 받은 ob는 div 객체입니다.

그다음 style.backgroundColor 속성을 사용하여 색상을 "green" 이라고 넣어주었습니다.

(이전 강의 BOM 에서 배운내용 활용)

그결과 위와같이 검정색에서 초록색으로 변했습니다.

기본모델

많이 쓰이는 방식으로 스크립트에 이벤트를 기술하여 적용합니다.

장점은 자바스크립트, HTML 모두 분리 되어있습니다.

사용방법 및 문법

스크립트 영역에 클릭이벤트를 기술합니다.

태그객체.onclick = function(){

this.style.backgroundColor = "green";

}

태그객체는 document.getElementById("아이디") 로 변수로 할당하여 사용하여도 되며..

document.getElementById("아이디").onclick 으로 바로 정의하여도 됩니다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            
            window.onload = function(){
                document.getElementById("firstDiv").onclick = function(){
                    this.style.backgroundColor = "green";
                }    
            }
        
            
        </script>
    </head>
    <body>
        <div id="firstDiv" style="width: 100px; height: 100px; background-color: black;" ></div>
    </body>
</html>
Colored by Color Scripter
cs

실행결과 및 설명

처음 화면에서는 검은색 div 출력됩니다.

검은색 div 를 클릭하면..

이렇게 초록색 div로 바뀌게 됩니다.

그럼 코드를 리뷰해 보겠습니다.

HTML 구문에 아이디가 firstDiv 인 div 태그를 만들어 주었습니다.

            window.onload = function(){

                document.getElementById("firstDiv").onclick = function(){

                    this.style.backgroundColor = "green";

}

}

다음 스크립트영역에 onload 를 사용하여 모두다 로드된후에..

getElementById 함수를 사용하여 아이디가 firstDiv 인 div 객체를 잡은후에 onclick 이벤트롤 바로 정의하였습니다.

this 키워드를 사용하여 style 영역에서 backgroundColor 색상을 초록색상으로 변경하였습니다.

그결과 위와같이 색상이 변하는것을 확인할수 있습니다.

표준 핸들러 모델

기본모델과 같이 많이쓰이는 방식입니다.

사용방법 및 문법

1. 핸들러 추가

태그객체.addEventListener("이벤트",만든 함수, 버블링 캡처링 여부);

2. 핸들러 삭제

태그객체.removeEventListener("이벤트",만든 함수, 버블링 캡처링 여부);

(버블링은 이벤트가 발생시 상위요소로 올라가는것이고.. 캡처링은 이벤트가 발생시 하위요소로 내려가는것입니다.)

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            
            window.onload = function(){
                var divob = document.getElementById("firstDiv");
                divob.addEventListener("click", clickEvent, false);
                
                function clickEvent(){
                    divob.style.backgroundColor = "green";
                }
                
            }
        </script>
    </head>
    <body>
        <div id="firstDiv" style="width: 100px; height: 100px; background-color: black;" ></div>
    </body>
</html>
Colored by Color Scripter
cs

실행결과 및 설명

처음 화면에서는 검은색 div 출력됩니다.

검은색 div 를 클릭하면..

이렇게 초록색 div로 바뀌게 됩니다.

그럼 코드를 리뷰해 보겠습니다.

HTML 구문에 아이디가 firstDiv 인 div 태그를 만들어 주었습니다.

            window.onload = function(){

                var divob = document.getElementById("firstDiv");

                divob.addEventListener("click", clickEvent, false);

                function clickEvent(){

                    divob.style.backgroundColor = "green";

}

}

다음 스크립트 영역에서 onload 로 모두 로드된후에

divod 변수에 firstDiv 의 아이디를 갖고있는 div 객체를 할당해주었습니다.

다음 변수 divod 에 addEventListener 함수를 사용하여 click 이벤트가 일어날때 clickEvent 함수를 실행하도록 하였고..

clickEvent 라는 함수를 만들고 함수에서는 divod 변수의 할당된 객체에 스타일 속성으로 들어가 배경색상을 바꿔주었습니다.

그결과 위와같은 결과를 얻을수 있습니다.

MS 핸들러 모델

표준 핸들러와 비슷하나..

익스플로러 8 버전 밑에서만 작동을 하고..

즉.. html5 도 아니라는 소립니다.

2019년 시대에서는 좀처럼 보기 힘듭니다..

많이 사용하지는 않습니다.

사용방법 및 문법

1. 핸들러 추가

태그객체.attachEvent("이벤트",만든 함수, 버블링 캡처링 여부);

2. 핸들러 삭제

태그객체.detachEvent("이벤트",만든 함수, 버블링 캡처링 여부);

(버블링은 이벤트가 발생시 상위요소로 올라가는것이고.. 캡처링은 이벤트가 발생시 하위요소로 내려가는것입니다.)

예제

-표준 핸들러와 크게 다르지 않아 생략합니다-

실행결과 및 설명

-표준 핸들러와 크게 다르지 않아 생략합니다-

이벤트 객체

addEventListener 함수를 사용하여 이벤트가 일어나면 내가 만들어 놓은 함수를 사용할수 있으며 매개변수를 넘길수가 없죠.

하지만... 이벤트가 일어난 곳의 객체가 내가 만들어둔 함수로 넘어가 사용할수가 있습니다.

즉 이벤트가 일어난 객체를 맘대로 사용할수가 있습니다.

사용방법은 생략하며 바로 예제로 들어가겠습니다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            
            window.onload = function(){
                
                document.getElementById("firstDiv").addEventListener("click", clickEvent, false);
                document.getElementById("endDiv").addEventListener("click", clickEvent, false);
                
                function clickEvent(){
                    this.style.backgroundColor = "green";
                }
                
            }
        
        </script>
    </head>
    <body>
        <div id="firstDiv" style="width: 100px; height: 100px; background-color: black; margin-bottom: 30px;" ></div>
        <div id="endDiv" style="width: 100px; height: 100px; background-color: black;" ></div>
    </body>
</html>
Colored by Color Scripter
cs

실행결과 및 설명

처음나온 화면입니다.

위의 div 를 클릭하면 색이변합니다.

두번째 div 를 클릭하면 색이 변합니다.

즉 this 키워드로 각각 적용되는것을 확인할수 있습니다.

그럼 코드를 리뷰해 보겠습니다.

        <div id="firstDiv" style="width: 100px; height: 100px; background-color: black; margin-bottom: 30px;" ></div>

        <div id="endDiv" style="width: 100px; height: 100px; background-color: black;" ></div>

두개의 div 를 만들어 주었습니다.

            window.onload = function(){

                document.getElementById("firstDiv").addEventListener("click", clickEvent, false);

                document.getElementById("endDiv").addEventListener("click", clickEvent, false);

                function clickEvent(){

                    this.style.backgroundColor = "green";

}

}

그다음 onload 를 사용하여 모두 로딩이 된후에..

firstDiv 에 addEventListner 사용하여 click 이벤트가 일어날때 함수 clickEvent 가 실행되도록 하였고..

endDiv 에도 addEventListner 사용하여 click 이벤트가 일어날때 함수 clickEvent 가 실행되도록 하였습니다.

다음 clickEvent 함수에서 this 키워드를 사용하여 이벤트가 일어나는 객체의 백그라운드 색상을 변화시켜주었습니다.

그결과 위와같은 결과를 얻을수 있습니다.

글을 마치며..

이벤글에서는 이벤트에 대해서 알아보았습니다.

이벤글은 매우 중요하다고 생각합니다.

협업을 할때 각자 코딩 스타일이 다르기에 모두알고 넘어가셧으면 좋겠습니다.

모두 수고하세요!

도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요!

저작자표시 비영리 변경금지

'Programming > JavaScript, jQuery' 카테고리의 다른 글

[jQuery 1강] 제이쿼리 개요 및 개발환경구축 (0)	2019.03.22
[javascript 16강] 이벤트 종류 (0)	2019.02.22
[javascript 14강] DOM (문서 객체) (0)	2019.02.19
[javascript 13강] BOM (브라우저 객체) (0)	2019.02.18
[javascript 12강] 내장객체 (0)	2019.02.17

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/04 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

글 보관함

국브스토리

티스토리 뷰