반응형

자바스크립트 개발 환경은 Microsoft Visual Studio 2015 버전 HTML 기능 및 Chrome을 이용하고 있습니다.





첫 내용

1
2
3
4
5
6
7
8
9
10
11
12
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <h1 onclick="console.log('이 부분을 클릭하였습니다.')"> HTML Tag 속성에 이벤트 핸들러 추가하기</h1>
        <input type="text" onchange="console.log('값이 변경되었습니다.');" onkeydown="console.log('값이 입력되었습니다.')" />
    </body>
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus



클릭하시면 결과 화면을 확인 할 수 있습니다.



참고로 위 코드를 실행하고 Chrome에서 로그를 보기 위해서는 

F12를 누른 후 사용자 개발 도구 console모드에서 에서 확인할 수 있다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <form method="GET" action="b.html" id="form1">
        ID : <input type="text" name="id" /><br />
        Send Message : <input type="text" name="msg" /><br />
        <input type="submit" />
    </form>
 
    </script>
</body>
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus

위의 코드를 이용하여 a.html에서 b.html로 값들을 보낼 수 있게 된다.


이는 한번 코드를 직접 작성하여 실행해보자.




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
31
32
33
34
35
36
37
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <form method="GET" action="b.html" id="form1" onsubmit="console.log('from tag'); return false;">
        ID : <input type="text" name="id" /><br />
        Send Message : <input type="text" name="msg" /><br />
        <input type="submit" />
    </form>
 
    <script>
        var evt = document.getElementById("form1");
        evt.onsubmit = function a() {
            console.log("from property");
            return false;
        }
 
        function b() {
            console.log("from addEventListener");
            return false;
        }
        function c() {
            console.log("from addEventListener-2");
            return false;
        }
        evt.addEventListener("submit", b);
        evt.addEventListener("submit", c);
 
        //evt.removeEventListener("submit", b);
 
    </script>
</body>
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus



form method부분에서 onsubmit 부분이 생겼는데 서브밋을 하면 콘솔 로그가 뜨고 그다음 행위를 하지 못하게 return false로 할 수 있다.


이렇게 하면 b.html로 넘어가지 않게 된다.


스크립트에서 onsubmit를 이용하여 또다른 이벤트를 만들 수 있고 그 외 addEventListener을 통해 submit 행동이 이뤄질 때 이벤트를 만들어 낼 수도 있다. 


마지막으로 removeEventListener을 통해 b 이벤트 삭제도 가능하다.







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

'Basic > JavaScript' 카테고리의 다른 글

null, undefined, false 그리고 ==와 === 차이  (0) 2018.08.14
자바스크립트 JSON파일 AJAX로 읽기  (0) 2018.05.23
자바스크립트 쿠키(Cookie) 개념 및 사용 방법  (1) 2017.09.28
자바스크립트 navigator  (0) 2017.09.28
자바스크립트 location  (0) 2017.09.28

티스토리툴바