제이쿼리(jQuery) 기초 문법
제이쿼리 이벤트
강제로 이벤트 발생 시키기
이벤트가 강제로 발생했다는 말은 사용자에 의해 이벤트가 발생한게 아니라 핸들러에 의해 자동으로 이벤트가 발생했음을 의미한다.
<script>
$("이벤트 대상").단독 이벤트 등록 메소드();
$("이벤트 대상").trigger("이벤트 종류");
$(function(){
$("#btn1").click(function(){
alert("btn1");
});
$("#btn2").on({
"mouseover focus" : function(){
alert("btn2");
}
});
$("#btn1").click();//btn1 클릭시 위의 이벤트 핸들러가 실행
$("#btn2").trigger("mouseover");//btn2에 포인터를 올리면 이벤트 핸들러 실행
});
</script>
이벤트 제거 메소드
이벤트를 제거하는 메소드로 off()가 있다.
<script>
$("이벤트 대상").off("제거할 이벤트 종류");
</script>
이벤트 객체와 종류
사용자가 이벤트를 발생시킬 때마다 이벤트 핸들러의 매개변수에는 이벤트 객체가 생성되며, 이벤트 객체에는 이벤트 타입에 맞는 다양한 정보를 제공하는 속성과 메소드가 포함되어 있다.
<script>
$("이벤트 대상 선택").mousemove(function(매개변수){
매개변수(이벤트 객체).속성;
});
$(document).on("mousemove",function(e){
//마우스 포인터의 좌표값을 x,y클래스 부분에 보여준다.
$(".X").text(e.pageX);
$(".Y").text(e.pageY);
});
}
</script>
이벤트 객체의 속성 종류
| 구분 | 종류 | 설명 |
| 마우스 이벤트 | clientX(Y) | 마우스 포인터의 X(Y) 좌표값 반환(스크롤 이동 거리 무시) |
| pageX(Y) | 스크롤 X(Y)축의 이동한 거리를 계산하여 마우스 포인터의 X(Y)좌표값을 반환 | |
| screenX(Y) | 화면 모니터를 기준으로 마우스 포인터의 X(Y)좌표값을 반환 | |
| layerX(Y) | position을 적용한 요소를 기준으로 마우스 포인터의 X(Y)좌표값을 반환 | |
| button | 마우스 버튼의 종류의 따라 값을 반환(왼쪽:0, 휠:1, 오른쪽:2) | |
| 키보드 이벤트 | keyCode | 키보드의 아스키 코드값을 반환 |
| altKey | 이벤트 발생 시 alt키가 눌렸으면 true, 아니면 false를 반환 | |
| ctrlKey | 이벤트 발생 시 ctrl키가 눌렸으면 true, 아니면 false를 반환 | |
| shiftKey | 이벤트 발생 시 shift키가 눌렸으면 true, 아니면 false를 반환 | |
| 전체 이벤트 | target | 이벤트가 전파된 마지막 요소를 가리킨다. |
| cancelBubble | 이벤트의 전파를 차단하는 속성으로, 기본값은 false며, true로 설정하면 전파가 차단된다. | |
| stopPropagation() | 이벤트의 전파를 차단한다. | |
| preventDefault() | 기본 이벤트를 차단한다. 예를 들어 <a>에 클릭 이벤트를 적용하고 사용자가 이벤트를 발생시키면 기본 이벤트가 등록되어 있어 링크 주소로 이동하는데, 이런 기본 이벤트를 차단할 수 있다. |
키보드로 마우스 이벤트 대응하기
키보드 접근성이란 어떤 대상 요소에 마우스 이벤트를 등록했을 때 마우스 없이 키보드로 대상 요소를 사용할 수 있게 하는것을 말한다. 마우스 이벤트가 등록되었을 때는 키보드로 작동할 수 있게 대응 이벤트를 함께 작성하는게 좋다.
| 마우스 이벤트 | 키보드 이벤트 |
| mouseover | focus |
| mouseout | blur |
<body>
<button id="btn">버튼</button>
<p class="txt">내용</p>
<script>
$("#btn").on("mouseover focus",
function(){
$(".txt").hide();
});
</script>
</body>
위는 키보드 접근성을 고려한 방법이다. 마우스 포인터를 올리거나 키보드의 tab키로 포커스를 이동해 버튼으로 포커스를 이동하면 class="txt"인 p태그가 숨겨진다.
'언어공부 > JavaScript&jQuery' 카테고리의 다른 글
| 제이쿼리(jQuery) 기초 문법 - 애니메이션 메소드 및 효과 (0) | 2021.08.08 |
|---|---|
| 제이쿼리(jQuery) 기초 문법 - 제이쿼리 이벤트 (3) (0) | 2021.08.07 |
| 제이쿼리(jQuery) 기초 문법 - 제이쿼리 이벤트 (1) 이벤트 등록 메소드 (0) | 2021.08.06 |
| 제이쿼리(jQuery) 기초 문법 - 배열 관련 메소드 (0) | 2021.08.05 |
| 제이쿼리(jQuery) 기초 문법 - 선택자 (5) 콘텐츠 탐색 선택자 (0) | 2021.08.04 |