Day72 - [js]이벤트

이번에는 java script 의 이벤트에 대해서 알아 봅시다.

 

이벤트

이벤트는 어떠한 동작을 의미 합니다.

 

예를 들면, 마우스 클릭 같은 것.

 

이벤트의 종류

이벤트의 종류에는 여러가지가 있지만, 중요한 몇가지와, 사용하는 것만 알고 있으면 됩니다.

보통, click , load , keyup 정도를 많이 사용한다고 해요.

 

이벤트를 사용할 때는 앞에 on 을 붙여서 사용해주면 됩니다. ex) onclick

※ 이를 이벤트 핸들러 라고 합니다.

이벤트의 모델

이벤트의 모델에는 인라인 모델, 기본 모델, 표준 모델이 있습니다.

 

인라인 모델

인라인은 태그안에 직접 이벤트를 명시해서 사용하는 방법 입니다.

이렇게, 태그 안에 onclick 을 했을 경우 어떤 함수가 동작을 하도록 해주고, <script></script> 안에서 함수를 정의 하거나, 함수를 직접 태그 안에 넣어 줍니다 ( 태그 안에 함수를 작성하면 보기가 불편함 )

인라인 모델로 이벤트를 작성할 경우에 장점이 있습니다.

여러가지 태그가 같은 함수를 호출하는 방법 입니다.

태그 안에 check2 라는 함수에 'this' 를 매개변수로 넘겨 주었는데, 이는 태그 자체를 의미 합니다.

innerHTML 은 태그 사이에 입력된 HTML 텍스트 입니다.

매개변수로 넘어온 'this' 에 . 을 사용해서 속성에 접근할 수 있습니다.

 

만약, innerHTML 에 다른 값을 넣어줄 경우 함수가 실행이 되면, 해당 텍스트가 변합니다.

console.log 를 통해 어떠한 값이 나오는지 확인해 보는 습관을 만드는 게 좋습니다.

 

기본 모델

기본 모델은, 태그에 id 값을 주어서, 해당 id값을 기반으로 태그를 얻어와서, 해당 태그에 이벤트를 작성해 주는 방법 입니다.

 

document.getElementById("아이디") 를 사용 해서 가져옵니다.

해당 모델은 사용하려고 하는 태그가 <script> 보다 위에 있습니다.

 

만약, 사용하려고 하는 태그가 <script> 아래에 있다면, 코드는 위에서부터 아래로 순서대로 읽어오기 때문에, 에러가 납니다.

 

이럴 경우. window.onload 를 사용하면 됩니다 ( 페이지가 전부 로드된 후 실행 )

표준 모델

표준 모델은, 기본 모델과 똑같이 이벤트를 만들어주려고 하는 태그를 얻어옵니다.

 

그 후, addEventListener 를 사용 합니다.

 

addEventListener( "이벤트" , 함수 )

함수가 들어가는 것 이기 때문에, 바로 익명함수를 넣어줘도 됩니다.

그리고, 익명함수를 넣을 수 있다는 것은, 화살표 함수를 쓸 수 있다는 것 입니다.

표준 모델의 장점은, 동일한 이벤트를 여러개 만들 수 있다는 점 입니다.

인라인 모델과, 기본 모델은 하나의 이벤트 'click' 에 대해서 하나의 기능만을 만들 수 있지만, 표준 모델은 하나의 이벤트 'click' 에 대해서 여러개의 기능을 계속 등록할 수 있습니다.

 

아래는 예제 및 문제

select 의 option 선택에 따라서 본문에 나오는 단어를 바꾸기.

내가 풀은 답.

선생님이 풀어준 답.