Frontend/JavaScript (2) 썸네일형 리스트형 [자바스크립트 A to Z] 1_html에 스크립트 추가하기 (+ async, defer) 이번챕터 핵심: html에 자바스크립트 추가해보기 html에 css 적용하는 방식과 마찬가지로, html에 js 적용하는 두가지 방식이 있음 1. html 내부에 설정하는 방식2. 외부파일을 가져오는 방식 첫 번째 방식부터 보자. 1. 기본 사용법HTML 파일 내에 직접 JavaScript 코드를 작성바디태그 안의 끝에다가 스크립트 태그 추가 안녕하세요! 2. 외부 JavaScript 파일 사용script.js 파일 생성HTML 파일에서 외부 스크립트 불러오기 안녕하세요! 2) 특징: HTML 파싱이 모두 끝난 후 js의 파싱이 시작된다. (이게 단점이 될 수도 있는 거임) preventDefault 와 stopPropagation 차이점 (+ 이벤트 버블링, 캡쳐링) preventDefault()기본동작 취소예를 들어 버튼의 submit 은 기본적으로 값을 전송하고, 새로고침 하는 기능을 한다.이때 e.preventDefault() 를 사용하면 submit의 전송과 새로고침을 막는다.또 다른 예로, 기본적으로 실행되는 a 태그의 링크이동을 막는다. stopPropagation()이벤트 전파 중지 (기본동작을 막지는 않음)버블링과 캡쳐링을 막는 역할을 한다 👩🏻💻 버블링, 캡쳐링이 뭔지 알아보자버블링설정없이 기본적으로 버블링으로 동작자식 요소를 누르면 한단계씩 타고 올라가서 자신을 감싸고 있는 최상위 부모요소에 걸린 이벤트까지 실행되는 것 아래 예제코드의 경우 inner를 클릭하면 Inner => Middle => Outer 순으로 alert이 실행된다. [자식.. 이전 1 다음
