728x90 JavaScript35 19. 이벤트 객체 [모던자바스크립트 프로그래밍의 정석] event 객체의 프로퍼티와 메서드 웹 문서에 이벤트가 발생하면 자동으로 이벤트와 관련된 객체가 만들어 집니다. 이벤트 객체에는 이벤트 이름이나 발생위치, 발생한 시간 등 이벤트와 관련된 다양한 정보가 포함되어 있습니다. 그래서 자바스크립트에서는 이벤트를 처리 할 때는 이벤트 객체를 자주 사용합니다. event 객체에 담긴 정보, 즉 프로퍼티는 다음과 같습니다. 그리고 event 객체에서사용할 수 있는 메서드는 preventDefault( ) 뿐입니다. 프로퍼티 기능 altKey 이벤트가 발생했을 때 [Alt]를 누르고 있었는지의 여부를 확인하고 Boolean값을 반환합니다 button 마우스 키값을 반환합니다. charCode keypress 이벤트가 발생했을 때 .. 2023. 1. 6. 18. 이벤트 처리 [모던자바스크립트 프로그래밍의 정석] HTML 태그에 함수 연결 이벤트를 처리하는 가장 간단한 방법은 이벤트가 발생한 HTMl 태그에 직접 함수를 연결 하는 것 입니다. 이 방법은 자바스크립트의 초기 버전부터 사용해 왔고, 지금도 많이 사용하고 있습니다. HTML 태그에 이벤트 처리기를 연결하기 위한 속성을 추가 하는데, 속성 이름은 'on이벤트명'으로 표현하고 그 뒤에 함수를 연결하는 것 입니다. 웹 요소에 함수 연결 스크립트 소스를 변경해도 HTML 마크업에는 영향을 주지 않게 하려면 이벤트 처리기도 스크립트 소스에서 처리하는 것이 좋습니다. 따라서 DOM을 사용해 웹 요소를 가져온 후 프로퍼티로 함수를 연결해야 합니다. 요소.on이벤트명 = 함수 이벤트가 발생시.. 2023. 1. 6. 17. 이벤트 [모던자바스크립트 프로그래밍의 정석] 이벤트란? 웹 브라우저나 사용자가 실행하는 어떤 동작을 말합니다. 예를 들어 웹 문서에서 키보드의 키를 누르는 것도 이벤트 이고, 웹 브라우저 창에 웹 페이지를 불러오는 것도 이벤트 입니다. 하지만 웹 브라우저에서 어떤 동작이 이루어진다고 해서 모두 이벤트가 되지는 않습니다. 이벤트는 웹 페이지를 읽어 오거나 링크를 클릭하는 것처럼 웹 문서 영역에서 이루어지는 동작만을 말합니다. 따라서 사용자가 웹 문서 영역을 벗어나서 클릭하는 행위는 이벤트가 아닙니다. 문서 로딩 이벤트 문서 로딩 이벤트는 서버에서 웹 문서를 가져오거나 위 아래로 스크롤 하는 등 웹 문서를 웹 브라우저 창에 보여 주는것과 관련된 이벤트 입니다. 이벤트 이벤트가 발생하는 순간 abort 웹 문서가 완.. 2023. 1. 5. 16. DOM에서 폼 다루기 [모던자바스크립트 프로그래밍의 정석] 폼 요소에 접근하고 값 가져오는 방법 id나 class 값을 사용하여 폼 요소에 접근 할 수 있습니다. 자바스크립트에서 value 프로퍼티를 사용하면 폼 요소 중 텍스트 필드나 이메일 필드에서 사용자가 입력한 값을 가져 올 수 있습니다. 요소.value 폼 요소에 id나 class 속성이 없고 name 속성만 있으면 name 식별자를 사용해 폼 요소에 접근 할 수 있습니다. 요즘은 대부분 폼 요소에 id나 class를 사용하지만, CSS가 등장하기 전에는 name을 사용하여 폼에 접근했습니다. 혹시 다른 사람이 작성해 놓은 폼 소스에 name 속성만 있다면 name 속성으로도 폼 요소에 접근할 수 있습니다. 폼 요소에 id나 class속성 뿐만아닌 name 속성도 없.. 2023. 1. 4. 이전 1 2 3 4 5 6 7 8 9 다음 728x90