이벤트핸들러
-
jQuery 제이쿼리 이벤트, Ajax 비동기 처리JavaScript 2020. 9. 25. 23:58
🎯 자바스크립트 라이브러리 jQuery 이벤트 처리와 Ajax 비동기 처리 방법을 알아본다. jQuery 기본 Event .ready(function) HTML문서의 모든 DOM요소들이 완벽하게 사용할 준비가 되면 호출되어 function함수가 실행된다. 파라미터 안에 이벤트 핸들러나 jQuery 코드를 추가한다. 외부 리소스나 이미지와 상관없이 모든 돔 요소들이 준비되면 바로 호출되기 때문에 window.onload보다 빠르다. .on(events[,selector][,data],function) .on() 메서드는 .bind() 메서드와 마찬가지로 이벤트 핸들러를 등록하기 위하여 사용되는 메서드이다. .on() 메서드는 동적으로 생성될 요소에 대해서도 이벤트 처리가 가능하다. new $(functio..
-
자바스크립트 이벤트 핸들링 연습1JavaScript 2020. 9. 11. 21:14
🎯 자바스크립트 DOM level0 이벤트 핸들링 문제를 연습해본다. 이벤트 핸들링 문제연습 1. 사용중인 웹 브라우저 정보 출력하기 [보기]버튼을 클릭하면 브라우저 이름,브라우저 버전, 브라우저 온라인 여부를 출력한다. 사용중인 웹 브라우저 정보 보기 보기 브라우저 이름: 브라우저 버전: 브라우저 온라인 여부: 보기 버튼은 클릭이벤트로 info()함수를 호출한다. 자바스크립트의 info 함수는 span영역과 input 값을 셀렉해서 브라우저 정보를 입력한다. 브라우저 정보는 브라우저 관련 Navigator 객체를 사용하면 된다. 2. 특정 URL 접속하기 태그를 사용하지 않고 자바스크립트 코드를 사용하여 특정 URL로 접속해야 한다. [구글 사이트로 가기]버튼을 클릭하면 구글 홈페이지로 접속되고 사이트..
-
자바스크립트 form 객체, 이벤트 핸들링JavaScript 2020. 9. 10. 21:29
🎯 자바스크립트 폼 객체, 이벤트 핸들링, 이벤트 버블링을알아본다. Form 객체 폼은 클라이언트에서 서버에 입력 데이터를 전송하는 역할을 담당한다. 자바스크립트에서는 HTML폼에 form객체가 상호작용할 수 있도록 지원되며 document 객체의 속성으로 설정된다. 접근은 document.forms[] 배열을 통해 접근할 수 있다. 폼 이벤트 핸들러 onSubmit() : 사용자가 데이터를 전송했을 때 발생하는 이벤트 핸들러 onReset() : 리셋 버튼을 클릭했을 때 발생하는 이벤트 핸들러 action과 onSubmit 전송 버튼이 폼 태그 내에 위치하고 있다. 브라우저에서 전송 버튼을 누르면 폼 태그의 onsubmit 이벤트 핸들러가 자바스크립트의 test() 함수를 호출한다. 폼 태그의 액션은 ..