[javascript] 이벤트

이벤트 모델 종류 (이벤트를 부여하는 방법들)

1. 고전 이벤트 모델 => btn.onclick = function(){}
2. 인라인 이벤트 모델 => <button onclick="함수();"></button>    <script></script>
3. 표준 이벤트 모델 => addEventListener()

 

* 이벤트 관련 용어

event target : 이벤트가 일어날 객체(button, h2, label, .......)

event type : 이벤트 종류(click, scroll, mousemove, .......)

event handler : 이벤트가 발생했을 때 동작할 코드들의 모임

 

 

 

* 고전 이벤트 모델(기본 이벤트 모델)

요소 객체를 가지고 와서 해당 요소객체의 이벤트 속성에 접근한 후 이벤트 핸들러를 연결하는 방식

(== 익명함수를 대입한다.)

 

요소객체.(이벤트)속성명 = function(){};

=> null을 대입하면 이벤트가 제거됨

 

 

 

 

* 인라인 이벤트 모델

요소 내부에 직접적으로 이벤트 속성을 제시해서 실행할 내용을 정의하는 방식

주로 script 내에 정의되어있는 함수를 호출하는 방법을 선호

(순수 인라인 방식보다는 인라인 + 내부 방식을 많이 쓴다.)

 

 

=> 순수 인라인방식은 요소 내부에 직접적으로 이벤트를 기술하면 실행되는데 문제가 없지만

한 줄의 내용이 길어지고(가독성이 떨어짐) 복잡하므로 잘 쓰지 않는다.

 

 

 

요소 내부에서 test1()함수 호출하고 script태그 안에서 test1()함수를 정의하는 방법을 더 선호!

 

 

 

 

* 표준 이벤트 모델 (브라우저마다 안되는 곳이 많음(웹표준을 지키지 않아서 잘 쓰인다.)

이벤트를 걸고자하는 요소 객체.addEventListener('이벤트명', 이벤트핸들러=>익명함수);

요소객체.style 속성에 접근해서 이벤트 발생시 스타일 변경도 가능하다.

 

 

 

 

 현재 이벤트가 발생한 해당 요소객체(타겟)에 접근하는 방법

 

1. 고전 이벤트 방식

 

 

2. 표준 이벤트 방식

고전 이벤트 방식과 똑같다.

 

 

 

 

3. 인라인 이벤트 방식

 

 

 

 

 

태그별 기본적으로 가지고 있는 이벤트 제거

기본적으로 이벤트를 가지고 있는 요소

- a 태그
: 클릭 시 href 속성에 제시되어 있는  url을 요청하는 기본 이벤트 보유

- form 태그 내의 submit 버튼
: 클릭 시 사용자가 입력한 정보들을 action에 제시되어있는 url로 제출하면서 요청하는 기본이벤트 보유

기본이벤트를 제거하고자 한다면(실행 안되게끔)
=> 이벤트핸들러(함수) return값을 false로 리턴하면 기본이벤트가 실행 X (제거됨)

 

방법 1

 

방법 2

=> 두 링크 다 클릭은 되지만 naver로 페이지가 이동되지는 않는다.