이벤트

[TIL] JS DOM 이벤트, 이벤트 리스너, 노드, Easy PHP

✍ Today I Learned [Travel] 다시 만들어보기 이벤트가 발생하는 대상과, 바뀌어야 하는 대상, 이벤트 시점을 잘 생각하자. 변경해야 하는 css가 많은 경우 미리 class를 만들어 놓고 상황에 맞게 add(), remove() 메서드를 사용한다. 뭔가 찝찝하다 싶으면 항상 더 좋은 코드가 무엇인지 고민하기. HTMLCollection은 forEach() 메서드를 지원하지 않기 때문에 getElementByClassName()으로 불러온 값은 forEach() 메서드를 사용할 수 없다. (querySelectorAll()은 가능) [로그인 유효성 검사] onkeydown - 버튼이 눌렸을 때(input 요소에 글씨가 나타나기 전) onkeyup - 버튼이 올라왔을 때(input 요소에 ..

[JavaScript] 자바스크립트의 이벤트(event)

이벤트란? 이벤트(event)란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다. 웹 페이지에 사용된 자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다. 이벤트 객체는 전역 객체로써 모든 태그에 객체를 참조시킬 수 있다. 이벤트 리스너(event listener) 이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event handler)라고도 한다. 지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킨다. 이벤트 리스너 등록 작성된 이벤트 리스너는 먼저 해당 객체나 요소에 등록되어야만 호출될 수 있다. 객체나 요소에 이벤트 리스너를 등록하는 방법은 다음과 같다. 이벤트..

[TIL] JS 이벤트, 문자열 메서드, 이미지 파일 판별

✍ Today I Learned html 태그에 속성으로 onclick을 사용할 수 있으나 이벤트 리스너의 등록 개수가 제한적이기 때문에 추천하는 방식은 아니다. let sbmBtn = document.getElementById('sbmBtn'); sbmBtn.addEventListener('click', saveList); // 이런 방식을 더 추천 객체는 순서가 중요하지 않다. 모든 함수에서 객체에 접근하려면 함수 밖에서 빈 객체를 선언 후 함수 안에서 객체에 값을 할당하면 된다! const me = {}; // 이렇게 빈 객체 선언 이벤트를 발생시킬 때 데이터를 받아오는 시점이 언제인지 주의해야 한다. 모든 코드에 정답은 없다! 효율성의 차이만 있을 뿐.. 문자열 데이터 타입은 시퀀스 특성이므로 순..

[TIL] JS 함수, 객체, 이벤트

✍ Today I Learned 항상 능동적으로 공부할 것! 함수를 사용하면 효율성이 올라간다. arrow function을 이용하면 함수 코드의 양을 줄이면서 변수화 할 수 있다. 그러나 return이 없는 함수라면 굳이 쓰는 의미가 없다. 객체란? 개념적으로 인지 가능해야 함 고유적인 이름으로 구분해야 함 시작과 끝이 반드시 존재해야 함 값이 바뀌어도 객체 자체의 주소값은 바뀌지 않기 때문에 객체는 const로 선언한다. 객체 안에 arrow function을 사용할 수도 있지만 정보가 많아 가독성이 중요하기 때문에 잘 사용하지 않는다. this 키워드는 내가 소속된 객체를 가리킨다. JSON (JavaScript Object Notation)은 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기..