728x90
이벤트(event)
마우스클릭, 텍스트 박스 작성등 이벤트가 발생하면 웹페이지에서 특정 동작이 발생되어 웹 브라우저에게 알려준다,
이벤트 핸들러(event handler)
특정 요소에서 발생하는 이벤트를 처리하기 위한 함수로 이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생시 웹 브라우저는 연결된 이벤트 핸들러를 실행한다.
자바스크립트 이벤트 핸들러(event handler)
let test = docuement.getByelementId("id");
test.addEventListener("click", function(){
alert("안녕하세요");
});
로딩 이벤트
| load() | 로딩이 완료될 때 발생 - html, css, js, img, iframe이 웹브라우저에 메모리에 올라간 경우 |
| ready() | 문서의 로딩이 시작될때 발생 - 웹 브라우저기 DOM tree를 생성한 직후 실행 |
| error() | 대상 요소에서 오류시 발생 |
페이지 로딩 순서
| 사용자 방문 |
브라우저 시작 |
문서 파싱 |
DOM 생성 |
리소스 로드 |
페이지 로딩완료 |
마우스 이벤트
- 모든 기준은 요소
| click / dbclick | 클릭 / 더블클릭시 이벤트 발생 |
| hover() | 마우스 포인터를 올리거나 벗어날 시 발생 |
| mouseenter() | 마우스 포인터가 해당 영역안으로 이동하면 발생 - 자식영역으로 이동시 미감지 |
| mouseleave() | 마우스 포인터가 해당 영역 밖으로 나가면 발생 - 자식영역에 들어갈 시 요소를 빠져나가지 않음으로 감지 |
| mouseup() | 마우스 버튼을 뗄 때 발생 |
| mousedown() | 미우스 버튼을 누를 때 발생 |
| mousemove() | 마우스를 움직일 때 발생 |
| mouseout() | 마우스 포인터가 해당 영역 밖으로 떠나면 발생 - 자식영역에 들어가면 요소를 나감으로 감지 |
| mouseover() | 마우스 포인터가 해당 영역 안으로 이동하면 발생 - 자식영역으로 이동시 재감지 |
| scroll() | 스크롤을 움직일 시 발생 |
키보드 이벤트
| keydown() | 키보드를 눌렀을 때 발생(한번만 실행) - 모든 키보드의 코드값 반환 |
| keypress() | 키보드를 눌렀을 때 발생(누르고 있으면 계속 실행) |
| keyup() | 키보드에서 손을 뗄때 발생 |
포커스 이벤트
| blur() | 요소를 벗어날 시(마우스로 다른 요소외 영역을 클릭시) 발생 |
| change() | 요소의 값이 변할 경우 이벤트 발생 |
| focus() | 요소에 포커스(마우스 클릭)시 발생) |
| focusin() | 포커스가 들어갈 때 발생 |
| focusout() | 포커스하고 나올 때 발생 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!--jOuery CDN 연결-->
<script>
//focus
$(document).ready(function(){
$('.text1').on('focus',function(){
$(".text1").css({
'background' : '#f00',
'border' : '1px solid red'
});
});
//blur
$('.text2').on('blur', function(){
$('.text2').css({
'background' : '#f00',
'border' : '1px solid red'
});
});
//focusin
$('.text3').on('focusin', function(){
$('.text3').css({
'background' : 'yellow'
});
});
//focusout
$('.text4').on('focusout', function(){
$('.text4').css({
'background' : 'yellow'
});
});
//change
$('.text5').on('change', function(){
if($(this).val() == "사과"){
$('.result').text("사과입니다.");
} else if($(this).val() == "포도"){
$('.result').text("저는 "+$(this).val()+"입니다.");
} else if($(this).val() == "바나나"){
$('.result').text("저는 "+$(this).val()+"입니다.");
} else if($(this).val() == "블루베리"){
$('.result').text("저는 "+$(this).val()+"입니다.");
}
});
});
</script>
</head>
<body>
<div>
<input type="text" class="text1"/>focus<br/>
<input type="text" class="text2"/>blur<br/>
<input type="text" class="text3"/>focusin<br/>
<input type="text" class="text4"/>focusout<br/>
<select class="text5">
<option value="사과">apple</option>
<option value="포도">grape</option>
<option value="바나나">banana</option>
<option value="블루베리">blueberry</option>
</select>
<br/>
<span class="result">-</span>
</div>
</body>
</html>
이벤트 연결
이벤트 핸들러 함수는 이벤트 객체를 통해 전달받을 수 있어 이벤트의 성질을 결정할 수 있다.
$('selector').bind(event, data, handler)
event : 이벤트 형 문자
data : 이벤트 객체의 속성에 대한 이벤트 핸들러의 데이터
handler : 이벤트 핸들러 function
// 단일 이벤트
$("#check").bind("click", function(event) { //실행하고자 하는 jQuery 코드 작성};
// 다중 이벤트
$("#check").bind("click", function(event) { //실행하고자 하는 jQuery 코드 작성
.bind("click", function(event) { //실행하고자 하는 jQuery 코드 작성}
.bind("click", function(event) { //실행하고자 하는 jQuery 코드 작성};
728x90
반응형
'개발기록 > 자바스크립트 & jQuery' 카테고리의 다른 글
| jQuery 도장깨기, 배열2 each() / inArray() / merge() / grep() / map() (0) | 2022.04.23 |
|---|---|
| jQuery 시각효과 & 애니메이션 [jQuery 도장깨기] (0) | 2022.04.22 |
| jQuery 도장깨기, function 종류 (each, css, append, wrap, clone, val) (0) | 2022.04.19 |
| jQuery 도장깨기, 요소탐색 방법 first / last / nth-child (0) | 2022.04.18 |
| jQuery 도장깨기, 라이브러리 연동, 기본 문법 알아보기 (0) | 2022.04.15 |
댓글