이벤트 처리 onclick 방식 / DOM 방식

< *이벤트 처리기 등록하기 >
=> 아주 많이 사용하는 기능!

- 마우스 클릭 / 키보드 입력 => 이벤트

- 버튼클릭 이벤트 발생시 후속조치 => 이벤트 처리(핸들)

- 함수 생성 => 이벤트 처리기


< 순서 >
1. HTML로 버튼 만들고 ( 이벤트 소스 생성 )
<input type=button value="작성">

[ 이벤트 처리가 내장된 버튼들 ]
<input type = submit>
<input type = reset>
얘넨 기본으로 내장되어있고,

button 같은건 아무 기능이 없으므로
=> 여기에 후속 이벤트처리 기능을 연결해놓는것

2. 이벤트 종류 정하기 ( onclick )

3. 후속 동작 함수 생성 ( 이벤트 처리기 )
<script>
function f1(){
alert(`걸어둔 함수 입니다.`)}
</script>

4. 이벤트 처리기 등록

(1) onclick 방식
- HTML 속성에 onclick 속성으로 연결

<input type=button value="작성"
onclick = 'f1( )' >
이벤트종류 = '이벤트함수( )'
- onXXXX 이벤트종류

=> HTML 속성에 의존
=> JS에 해당 함수가 없으면 오류가 날 수 있다.
( 간단한 이벤트 걸 때 사용 )



< 따옴표 >
- HTML 안에서 JS 문장 넣어줘야할 때,
onclick = "alert " 쌍따옴표 쓰면안되고
onclick = 'alert ' 그냥 따옴표 써야 동작했다.
( 동작 여부를 떠나서, 헤깔리는 걸 방지하기위해 구분해서 사용 필요 )
( 아니면 \ 으로 쌍따옴표 구분해줘야 하는데 이것도 오류났다. )
=> 안에거에 ` ` 쓰는걸로 정하고 쓰자.


(2) DOM 방식
- id 걸어놓고, getElementById 로 연결

<input id="dom" type=button value="작성" >

<script>

document.getElementById("dom").onclick
= function( ){ alert ( ); }

=> 문서에서 Id "dom"인것 가져와서 그게 클릭되면
함수 처리 할게

</script>

- DOM방식 이벤트처리는 script 순서 중요
: getElementById 로 연결하는 것이기 때문에,
=>id 가진 태그가 먼저 생성
=>그 이후 순서로 DOM 스크립트 나와야 실행 가능

그래서 => 보통 <script> 는 HTML</body> 마지막 부분에
몰아서 정리해둔다.

혹은
window.onload = start;
function start( ){ document.getElementById("dom").onclick=
function( ){ alert( ); } }

- 화면의 모든 HTML 요소 load 되면, 그때 start 호출
=> start 함수안에 함수 넣어둔 원하는 함수 실행
- 이렇게 하면 순서 안전성 보장

=> JS 에서 자체적으로 다 처리
=> 없으면 그냥 동작 안함.
=> 독립성 높다. 이 방식을 많이 사용한다.



---
< DOM - Document Object Model >
: HTML 태그를 하나의 객체처럼 사용하는 모델

let h1_tag = document.getElementById(" ");

class H1{
style = "";
contents = "";}
( 자바에서 마치 이런 모양새의 객체인 것 마냥 사용 )

h1_tag.style => style 값 출력
h1_tag.innerHTML => 내용값 출력
- 이런식으로 객체처럼 값을 꺼내면서 사용하는데, 일환으로
h1_tag.onclick = function( ){ }
- 클릭시 함수 실행
=> 이걸사용해서 이벤트처리를 하는 것
: DOM 방식 이벤트 처리