[html] JAVA script alert 로드하기 예제2

[결과물]

html에 JAVA입력하는 법

 

앞서 예제 1에서는 onclick만

사용해서 간단하게 처리했다.

 

▶ 이번에는 결과물은 같지만

본격적으로 java를 응용하는 예제 

<script>태그를 이용해서, JS코드 삽입하기.

 

▶ <script>내의 코드들은 js코드인 것으로 인식가능!

 

전체 코드는 이렇게 되어있다.

저번보다는 조금 복잡한 모습이다.

 

이제부터 하나씩 해석해볼 예정!!

그 전에 addEventListener개념을 생활코딩으로 들어봤다.

 

// 과외 정리.

 

[ addEventListener() ]

이벤트를 등록할때 제일 많이 쓴다.

장점이 여럿 있기 때문

 

출처: 생활코딩 강의

(아래 이미지에서부터 시작)

1. 이벤트를 button에 설치할 예정.

 

2. var t = document.getElementById('target');

 

var t ( 변수에 'target' 값을 담음)

 

 

3.  id값이 target인 엘리먼트(= t ) .  addEventListener

( ▶ t.addEventListener)

 

위에서 t에 id값인 'target'을 담았음.

 

▶ addEventListener라는 메소드를 호출!!

4. 첫 번째 인자로 'click'(이벤트 타입)을 받는다.

 

var t 객체가, 클릭이라는 이벤트를 발생했을때!!

 

▶addEventListener가 2번째 인자로 전달한

function alert 함수가 실행된다.

 

**인자 1: 'click' // 인자 2: function(event)

5. event라는 매개변수를 이용,

event 객체가 갖고있는 여러 property에 접근가능!!

▶ target.

addEventListener를 호출한 이벤트 타겟!!

 

→ 다시 말해서 var t와 동일인물.

(t에 담긴 객체)

 

event.target.value

 

value를 하게 되면, t의 value는

value="button"이 된다.

 

▶ 최종적으로 event.target.value

= 이 자체가 버튼이 됨.

 

 

**나중에 제이쿼리같은 라이브러리 쓰면 알아서 해줌.

→ 크로스브라우징(Cross browsing) 유의!

ie 8 버전 이하에서는

addEventListener가 아니라 attachEvent 메소드를 제공

(같은 기능인데, 이름만 다른 것)

 

▶ 코드가 동작하는 환경을 체크하기 위해,

[기능테스트] 해보기

→ 현재 이 코드가 addEventListener 지원하면,

위에 if문이 동작

 

 

→ 지원하지 않는다면, else if가 동작

 

else if에서 attachEvent하고,

메소드가 있으면 true/ 없으면 undefined (false) 로 판단

 

**차이점: attachEvent는 'onclick'

addEventListener는 'click'

[addEventListener 쓰는 이유]

 

해석

-(button)부분에 이벤트 설치

 

1. addEventListener로 클릭 이벤트 타입이 발생했을 때,

alert(1) 뜨도록 설치.

 

2. addEventListener로 클릭이 발생,

alert(2) 뜨도록 설치.

 

→ 이벤트를 등록하는 과정이 1번, 2번 등장!!

 

[프로퍼티(Property) 방식]

 

위의 addEventListener방식과 달리

alert(2)는 실행되나, 1번 실행 x

 

alert(2) : t.onclick 메소드의

리스너를 function(event)로 지정.

 

▶ 기존 alert(1)의 리스너(function(event))가 소멸

 

 ▶ 프로퍼티(property)방식으로 이벤트 설치시,

단 하나의 이벤트핸들러만 설치가능

 

[addEventListener 쓰는 이유]

addEventListener는 덮어쓰는게 아님.

리스너를 애드(추가)한다는 개념.

 

이걸 쓰면!!

**이벤트 리스너를 계속해서 추가하고,

순차적으로 실행됨.

[하나의 이벤트 타겟에 여러개의 listener설치]

vs

[하나의 listener로 여러개의 이벤트 타겟에 등록]

 

해석

- t1, t2는 각각 id값이 target1, target2

- btn_listener (이벤트리스너로 사용할 함수)

 

 t1.addEventListener('click', btn_listener);

▶ 클릭이 일어나면,

function (btn_ listener)을 하겠다.

▶ function을 var t1 의 이벤트리스너로 쓰겠다.

 

1. target1 이 클릭되면, btn_listenr 함수 호출

2. target2가 클릭되어도 btn_listenr 함수 호출

 

▶ 이벤트리스너를 하나만 생성

여러 개의 이벤트 타겟에 '리스너' 하나를 등록.

→ 이벤트리스너를 재활용 가능.

 

 **

이벤트타겟이 이벤트를 발생시켰을 때,

어느 target에서 시작된 건지 알아내는 방법?

 

▶ event. target.id 활용!!

 

 각각의 엘리먼트들이 가진 id값을 확인 가능!

해석: switch문으로 event.target.id 전달

 

1. target1이라면, alert(1) 출력

break문으로 끝낸 후, 다음 코드 실행

 

2. 2번째 버튼 클릭시, id값이 target2

▶ 2번째 case가 되면서,

alert(2) 출력 

 

**switch 문은 if문과 비슷한 개념이다. 

 

//생활코딩 [addEventListener] 정리 끝!!

var btn

변수를 선언하겠다는 의미!!

 

id 값은 button으로 정의해놨다.

 

1. document.getElementByID("btn")

▶ ID가 "btn"인 HTML요소를 가져와라.

 

2. btn.addEventListener('click', function( ){

alert("Hello world");

})

 

위에 불러온

변수 var = btn에

addEventListener로 이벤트 등록!

 

▶ 'click' 발생시 function () 을 작동시킨다.

alert("Hello world") 팝업창을 뜨게 함!