제이쿼리 -키보드 및 마우스 이벤트 객체와 종류

-이벤트 객체와 종류

사용자가 이벤트를 발생시킬 때마다 이벤트 핸들러의 매개변수에는 이벤트 객체가 생성되며, 이벤트 객체에는 이벤트 타입에 맞는 다양한 정보를 제공하는 속성과 메서드가 포함되어 있다.

 

기본형 : $(“이벤트 대상 선택”).mousemove(function(매개변수){

                        매개변수(이벤트 객체).속성;

});

-scroll() 이벤트 메서드

대상 요소의 스크롤바가 이동할 때마다 이벤트를 발생 시키거나 강제로 scroll이벤트를 발생시키는 데 사용한다.

 

기본형:1.scroll이벤트 등록

   $(“이벤트 대상 선택”).scroll(function() {자바스큽코드;});

   $(“이벤트 대상 선택”).on(“scroll”,function(){ 자바스큽코드;});

   2.scroll이벤트 강제 발생

     $(“이벤트 대상 선택”).scroll();

 -포커스 이벤트

포커스는 마우스로 <a>또는 <input>태그를 클릭하거나 tap키를 누르면 생성된다.

마우스가 없을 때 키보드만으로 사이트를 이용해야하는데 이를 키보드 접근성이라고 한다. 키보드 접근성을 높이기 위해서는 마우스 이벤트를 등록할 때 될 수 있으면 <a>또는 <input>태그에 등록하고 키보드가 없을 경우를 고려한 마우스 이벤트에 대응하는 키보드 이벤트까지 등록해야 한다.

 

마우스 이벤트에 대응하는 메서드 ex) focus(), focusin(), blur() , focusout()      가  있다.

 

-focus()/blur()/focusin()/focusout() 이벤트 메서드

focus->대상 요소로 포커스가 이동하면 이벤트 발생

blur ->포커스가 대상 요소에서 다른 요소로 이동하면 이벤트 발생

focusin ->대상 요소의 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트 발생

focusout ->대상 요소의 하위 요소 중 입력 요소에서 외부 요소로 이동하면 이벤트 발생

 

기본형 :  평소와 같고 메서드 부분만 다르다.

키보드로 마우스 이벤트 대응하기

키보드 접근성이란 어떤 대상 요소에 마우스 이벤트를 등록했을 때 마우스 없이 키보드로 대상 요소를 사용할 수 있게 하는 것을 말한다.

마우스 이벤트에 대한 키보드 대응 이벤트

mouseover <-> focus (키보드)

mouseout <-> blur (키보드)

 

ex)버튼에 마우스 포인터를 올리면 마우스 이벤트가 발생되어 ‘내용1’이 숨겨지는 예입니다. 마우스가 없으면 동작 X

1.키보드 접근성을 배려하지 않은 이벤트 예 ( 비추천 )

<button class=“btn”> 버튼 </button>

<p class=“txt_1”>내용1</p>

$(“.btn”).mouseover(function() {

$(“.txt_1”).hide();

});

->해당 이벤트에 대응하는 키보드 이벤트도 함께 등록하면 마우스가 없는 사용자도 키보드를 사용해 버튼의 기능을 사용할 수 있다.(tap)키 이용

 

2.키보드 접근성을 배려한 이벤트 적용 예 (추천 )

<button class=“btn”>버튼</button>

<p class=“txt_1”>내용1</p>

$(“.btn”).on(“mouseover focus”,function() {

$(“.txt_1”).hide();

});

-change() 이벤트 메서드

change이벤트 메서드는 선택한 폼 요소의 값(vale)을 새 값으로 바꿉니다.

또한 포커스가 다른 요소로 이동하면 이벤트를 발생시킵니다.

기본형 : 1.focus이벤트 등록

$(“이벤트 대상 선택”).change(function() {자바스큽코드;});

$(“이벤트 대상 선택”).on(“change”,function() {자바스큽코드;});

 

2.강제 발생

$(“이벤트 대상 선택”).change();