# addEventListener

51개의 포스트

[자바스크립트] Evnets

loginForm.addEventListener("submit", onLoginSubmit); // submit 이벤트가 발생한다면, onLoginSubmit함수를 실행시킨다는 의미 // JS는 onLoginSubmit함수 호출시 인자를 담아서 호출함. 해당 인자는 e

5일 전
·
0개의 댓글
·
post-thumbnail

[Html, JavaScript]자바스크립트에서 Html에 접근하기

이번엔 자바스크립트에서 어떻게 html요소를 불러오고 어떻게 조작하는지 복습해보자..h1태그에 id와 내용을 추가해서 하나 만들었고 결과물은 다음과 같다.이걸 자바스크립트에서 조작을 해보는 과정을 복습해 보자.일단 변수에 저장을 해서 가져와야한다. 변수를 선언하고 거기

2022년 9월 22일
·
0개의 댓글
·

[TIL] addEventListener() 3번째 파라미터 (feat. event capturing, event bubbling)

🤔 addEventListener() 3번째 파라미터에 대해 정리한 글입니다.addEventListener의 3번째 파라미터 : false or true(useCapture)addEventListener의 3번째 파라미터는 이벤트 버블링과 캡쳐링에 대한 컨트롤을 하는

2022년 9월 22일
·
0개의 댓글
·

TIL08 이벤트리스너

1) 이벤트리스너?이벤트 : 웹페이지에서 일어나는 클릭, 스크롤, 키보드입력, 드래그 등의 동작들.이벤트리스너 : 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트.2) 사용DOM객체. addEventListener(이벤트명, 실행할 함수명)

2022년 9월 3일
·
0개의 댓글
·
post-thumbnail

React 스크롤 특정 영역에서 애니메이션 효과 주기

특정 영역에 도달하면 애니메이션 효과 시작되게하는 방법

2022년 9월 1일
·
0개의 댓글
·
post-thumbnail

javascript_To Do List를 event.target으로 코드 개선해보기

item-row라는 컨테이너 안에 아래 코드에 있는 item, name, deletBtn 등 요소들에 하나씩 추가해 준 후 setAttribute로 클래스를 지정했었다이전 블로그에 있지만 input값을 받은 text.value값을 text 매개변수로 받아와서 그대로 넣

2022년 8월 16일
·
0개의 댓글
·
post-thumbnail

javascript_To Do List 다시 만들어보기(html을 js로 만들어보기)

이번엔 html도 js로 생성하여 만들어 보았다 계속 더 만들어봐야 익숙해질 수 있을 것 같다!!

2022년 8월 15일
·
0개의 댓글
·
post-thumbnail

스크롤 이벤트 페이지

스크롤로 무한 텍스트 플로우 되는 홈화면을 구현했다 이때 홈화면 전체를 보여주기 위해 body태그에 width, height 값을 100% 로 설정했었는데 스크롤 이벤트를 읽기 위해서는 height 값을 설정하면 스크롤 값을 읽지 못한다. 그래서 화면 전체를 보이고 싶

2022년 8월 12일
·
0개의 댓글
·

JavaScript 익히기 #7 addEventListener

저번 요소를 호출하는 법에 이어 이번에도 실무에서 많이 사용하는 이벤트 핸들러를 같이 다루려 한다. 우선 addEventListener를 다루기 전에 이벤트 핸들러에 대해 알아보자. 브라우저는 처리할 특정 사건이 발생시 이를 감지해서 이벤트를 발생시킨다. 크게 예를

2022년 8월 9일
·
0개의 댓글
·

addEventListener 함수 이벤트

버튼클릭시 숫자 카운트되는 이벤트리스너 함수

2022년 8월 5일
·
0개의 댓글
·
post-thumbnail

JavaScript: 시간 조건

내가 다음에 또 쓰려고 저장하는 모달 구현 코드 / setTimeout()함수에 대해 기록

2022년 6월 18일
·
0개의 댓글
·

이벤트리스너

유저가 웹페이지에 접속해서 클릭, 스크롤, 키보드 입력, 드래그 등을 사용할 수 있는데 이걸 이벤트라고 부름이벤트리스너는 이벤트가 일어나면 내부 코드를 실행해주는 기본 문법이다.이벤트 리스너를 쓰면 다양한 이벤트도 체크 가능!예시1) 셀럭터찾은요소에 마우스를 갖다대면

2022년 6월 4일
·
0개의 댓글
·
post-thumbnail

HTML에서 발생하는 이벤트 감지

클릭, 마우스 오버 등의 이벤트를 감지하고, 해당 이벤트가 발생했을 때 지정한 로직을 수행.Ex)버튼 클릭 시, 팝업 발생/마우스 오버 시 글씨 진하게 등등등...QuerySelector나 getElement 등을 통해 이벤트 감지하고자 하는 요소를 변수에 할당한 뒤,

2022년 5월 19일
·
0개의 댓글
·

이벤트 02.웹페이지 시작하기

이벤트란 웹브라우저가 알려주는 HTML요소에 대한 사건의 발생을 의미한다. 이벤트 타입은 발생한 이벤트의 종류를 나타내는 문자열로, 이벤트명(event name)이라고도 한다.가장 많이 사용하는 키보드,마우스,HTML DOM, Window객체 등을 처리하는 이벤트가 폭

2022년 5월 12일
·
0개의 댓글
·
post-thumbnail

[코딩애플 JS기초] form 공백검사, input, change이벤트

한 글자 입력할 때마다 발생하는 이벤트글자 입력 후 focus가 다른 곳으로 이동했을 때(유저의 마우스 커서가 input을 벗어났을 때) 발생하는 이벤트input과 다르게 한번 입력하기 시작해서 글자를 몇개를 입력하든지 이벤트는 발생하지 않지만 커서를 다른쪽에 두는 순

2022년 4월 17일
·
0개의 댓글
·
post-thumbnail

Passive Event Listener

최근 업무에서 특정 React 컴포넌트의 기본 wheel event의 동작을 막아달라는 니즈가 있었다.위 내용을 처리하면서 대충 알고있던 Passive Event Listener 대해서 조금 더 자세히 들여다보게 되었다.브라우저의 기본동작에 영향을 주지 않는 Event

2022년 4월 13일
·
0개의 댓글
·
post-thumbnail

[42byte] 모달 영역 바깥쪽 클릭시 모달 닫기

🤯 문제 프로젝트를 오픈하고, 느낀점이 있다면 우리는 상당히 많은 부분을 신경쓰고 구현했다고 생각했으나... 큼큼 생각보다 굉장히 예기치 못한 곳에서 미처 신경쓰지 못했던 실수들이 발견된다는 것이다. 예들들면, ...!!! 🥲 아래와 같이 댓글안의 드롭다운을 컴

2022년 4월 1일
·
0개의 댓글
·
post-thumbnail

[TIL] 2022-03-15

백준 문제풀기 (그리디13/50 → 탐색14/50 → 동적프로그래밍12/50)그리디 14번 문제 : ⚡️영어 Tip | "언제" & "얼마나 오래" - 질문에 쉽고 자연스럽게 대답하는 요령 🔗복습💬"내가 걔한테 좀 심했나?" , "~하려고 했던 것 뿐인데" , "부

2022년 3월 14일
·
0개의 댓글
·