happy cat image

everdevel

Brand New Day

login
알림X
  • 현재 댓글에 대한 답변만 표시합니다.
  • 표시할 댓글 이력이 없거나 로그인해 주세요.

EEOS

에버디벨 책을 학습할 수 있는 클라우드 개발 환경을 제공합니다.
개발환경구축없이 태블릿에서도 개발할 수 있는 책의 예제와 프로젝트
오직 당신을 위한 스토리지, URL, DB, 무제한 트래픽
그리고 웹기반 개발환경을 제공합니다.

더 알아보기
에버디벨이 만든 무료 클라우드 개발환경을 소개합니다.

클릭 이벤트 생성

우리가 요소를 클릭 했을 때 무언가를 실행하는 방법에 대해 알아보겠습니다.

1. inline 방식

저는 이 방식을 잘 사용하지 않지만 가끔 귀찮을 때 사용합니다.

태그에 onClick속성을 지정하고 값으로 실행문을 입력합니다.

예를 들어 p태그를 클릭할 때 클릭이벤트를 지정한다면

<p onClick="명령문">click here</p>

예를들어 Hello World 문구를 alert창으로 실행한다면

<p onClick="alert('Hello World');">click here</p>

그럼 코드로 만들어서 실행해봅시다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL - JavaScript - click event</title>
</head>
<body>
    <p onClick="alert('Hello World');">click here</p>
</body>
</body>
</html>

로그인을 하지 않은 상태에서도 이제 위의 코드를 실행 할 수 있습니다.
PLAY CODE 버튼 클릭 후 광고없이 횟수제한없이 코드를 실행 할 수 있습니다.
LOGIN

결과

click event

클릭을하면 alert창이 뜹니다.

click event

저는 태그내에 자바스크립트 코드를 사용하는것을 선호하지 않아서 잘 사용하지 않습니다.

위와 같이 정말 간단하게 사용할 땐 사용할때도 있지만 태그안에 자바스크립트 코드가 섞이거나하면 보기에도 불편해서 별로 사용하지 않습니다.

2. script태그에서 클릭이벤트 실행하기

script태그에서 이벤트를 생성하는 방법에 대해서 알아보겠습니다.

addEventLister() 함수를 사용하는 방법에 대해 학습합니다.

이 방법은 함수안에 첫번째 아규먼트로 이벤트명을 입력하는 방식입니다.

사용방법은 다음과 같습니다.

선택자.addEventLister('이벤트 유형', function(){ 명령문; });

선택자를 사용방법은 앞에서 학습했습니다. ^^

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL - JavaScript - click event</title>
<script>
    window.onload = function(){
        var target = document.getElementsByTagName('p')[0];
        target.addEventListener('click', function(){
            alert('Hello World');
        });
    };
</script>
</head>
<body>
    <p>click here</p>
</body>
</html>

로그인을 하지 않은 상태에서도 이제 위의 코드를 실행 할 수 있습니다.
PLAY CODE 버튼 클릭 후 광고없이 횟수제한없이 코드를 실행 할 수 있습니다.
LOGIN

결과

click event

클릭을하면 alert창이 뜹니다.

click event

봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.


    
    

강좌로 돌아가기

댓글 0개

정렬기준