활동 내용

결론은 HTML 요소에 대한 처리가 필요하다는 것이다.
예컨대
사용자가 브라우저에서 버튼 클릭
이 이벤트를 클릭했습니다.

이벤트 구동

JS에는 이벤트 발생 코드를 실행하는 메커니즘이 있습니다.
이 사건을 얻기 위해서는 노드에 대한 쓰기 처리가 필요하다.

이본트리

그럼 어떻게 써요?
addEventListener 메서드 사용

(ノードオブジェクト).addEventListener("イベント名","関数");

이것은 노드 대상에서 이벤트가 발생할 때 함수가 집행되는 메커니즘이다.
구체적인 예를 살펴봅시다.

만약 이런 홈페이지가 있다면 행사를 개최해 보세요.

let btn = document.querySelector("a#btn-square");

function hello() {
  console.log("Hello world");
}

btn.addEventListener("click", hello);

원래 Hello World는 이렇게 출력을 해야 돼요.
다음과 같은 오류가 발생할 수 있습니다.

이것은 스크립트의 라벨이 어디에 쓰여 있는지에 관계된다.
기본적으로 script의 기술을 읽으면 HTML의 헤드 탭에 기록됩니다.
여기서도 프로그래밍의 원리 원칙을 회상해 보세요.
위쪽부터 순서대로 읽습니다.
버튼 코드를 읽기 전에
이벤트 코드 읽기
잘못된 현상이 나타나다.
그러니 다음과 같은 방법을 사용하세요.

①window.onload = function() { 処理 };
②window.addEventListener('load', function() { 処理 });

두 가지 패턴이 있어요.②의 방법을 사용한다.
이것은 페이지를 읽은 후에 실행되기 시작합니다.
따라서 방금 전의 기술을 다음과 같이 정정하겠습니다.

function HelloWithButton() {
let btn = document.querySelector("a#btn-square");

function hello() {
  console.log("Hello world");
}

btn.addEventListener("click", hello);
}

window.addEventListener("load", HelloWithButton);

그렇다면 결과는 다음과 같다.

그럼 절차를 정리해 봅시다.

총결산

① DOM 트리에서 노드 얻기
② 하고 싶은 처리 내용을 JS로 적는다
③ 활성 시작 HTML 켜기