공부 기록일지📚

jQuery는 이벤트와 관련해서 편리한 기능을 제공한다. 이벤트 프로그래밍: jQuery와 none jQuery의 비교 -> jQuery는 크로스 브라우징을 알아서 처리해주고 이벤트를 보다 적은 코드로 구현할 수 있도록 해준다. jQuery : on API 사용해보기 ▶기본 사용법 on은 jQuery에서 가장 중요한 이벤트 API이다. on API를 통해서 jQuery에서 이벤트를 다루는 방법을 알아보자. .on( events [, selector ] [, data ], handler(eventObject) ) *jQuery 문법에서 []대괄호의 경우는 생략이 가능한 인자 뜻이다. event : 등록하고자 하는 이벤트 타입을 지정한다. (예: "click") selector : 이벤트가 설치된 엘리먼트의..

이벤트 타입이란 이벤트의 종류라고 할 수 있다. 웹브라우저는 많은 종류의 이벤트 타입을 제공한다. 주요 이벤트 타입을 중심으로 어떤 이벤트 타입이 있는 지 알아보자. 폼(form)에 관련된 이벤트 타입 ▶submit 이벤트 : 폼의 정보를 서버로 전송하는 명령인 submit시에 일어난다. form 태그에 적용된다. name ▶change 이벤트 input(text,radio,checkbox),textarea,select 태그에 적용된다. //입력창에 텍스트를 입력했다가 다시 지워서 원상복귀하면 change이벤트가 작동하지 않는다. ▶blur, focus 이벤트 focus는 엘리먼트에 포커스가 생겼을 때, blur는 포커스가 사라졌을 때 발생하는 이벤트이다. -> 다음 태그를 제외한 모든 태그에서 발생한다..

웹브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다. 텍스트 필드에 포커스를 준 상태에서 키보드를 입력하면 텍스트가 입력된다. 폼에서 submit 버튼을 누르면 데이터가 전송된다. a 태그를 클릭하면 href 속성의 URL로 이동한다. 이러한 기본적인 동작들을 기본 이벤트라고 하는데 사용자가 만든 이벤트를 이용해서 이러한 기본 동작을 취소할 수 있다. inline 방식의 경우 이벤트의 리턴값이 false이면 기본 동작이 취소된다. prevent event on opentutorials 위의 코드는 체크박스의 체크 여부에 따라서 a태그와 form태그의 기본동작을 막는 기능을 한다. 참고로 onclick 내부의 JS코드 중 ~.checked 부분은 체크박스의 상태가 true인 것과 같은 뜻이다...

HTML 태그는 중첩되어 있다. 따라서 태그에서 발생하는 이벤트는 중첩되어 있는 태그들 모두가 대상이 될 수 있다. 이런 경우 중첩된 태그들에 이벤트가 등록되어 있다면 어떻게 처리될까? 캡쳐링(capturing) - 이벤트가 부모에서부터 발생해서 자식으로 전파 밖에서부터 안쪽으로 이벤트가 전파됨 IE 낮은 버전에서는 작동하지 않기 때문에 많이 사용 X 코드에서 차이점은 document.querySelector('html').addEventListener('click', handler, true); 이벤트리스너의 3번째 인자(use capturing) 기본값은 false ->3번째 인자를 주지 않는다면 자동으로 버블링 처리 값이 true이면 캡쳐링, false이면 버블링 버블링(bubbling) - 이벤트..

이벤트란? 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 클릭 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미 이벤트 관련 용어 ▶event target target은 이벤트가 일어날 객체를 의미한다. ▶event type 이벤트의 종류를 의미한다. 아래 예시 코드의 경우 click 이벤트 타입이다. 어떤 "때"에 해당하는 것 태그마다 사용할 수 있는 타입이 다르다 ▶event handler 이벤트가 발생했을 때 동작하는(실행될) 코드를 의미 아래 예시 코드에서는 alert(window.location) 이 이벤트 핸들러에 해당한다. //event target: button 태그에 대한 객체 //event type: click 이벤트 타..