제이쿼리 이벤트
자바스크립트에서 사용자가 사이트에 방문 후 취하는 모든 행위는 이벤트라고 한다.
로딩부터 시작해서 클릭과 같은 모든 동적인 행위(이벤트)가 발생하면 특정 코드가 발생하도록 입력할 수 있는데
이렇게 실행되는 코드를 이벤트 핸들러라고 부른다.
이벤트의 종류에는 로딩이벤트, 마우스 이벤트, 스크롤 이벤트, 포커스(폼) 이벤트, 키보드 이벤트가 존재하며 이벤트 메서드를 통해 실행 가능하다.
이벤트 등록 메서드의 구조에는 하나의 이벤트만 등록할 수 있는 단독 이벤트 등록 메서드와 여러 이벤트를 등록하는 그룹 이벤트 등록 메서드가 있다.
이렇게 실행된 이벤트는 이벤트를 제어하는 메서드와 프로퍼티를 통해 제어 가능하다.
// 기본형
$("이벤트 대상").이벤트명(function(){
자바스크립트 코드;
})로딩이벤트
로딩이벤트를 사용하면 사용자가 사이트를 방문할 때 이벤트가 실행시킬 수 있다.
ready()이벤트는 방문한 사이트에 요청한 html 문서 객체 로딩이 끝나면 이벤트를 발생시킨다.
load()이벤트는 외부에 연동된 소스(img, video, iframe...)의 로딩이 끝나면 이벤트를 발생시킨다.
| 로딩 이벤트 | |
| load() | 선택한 이미지 또는 프레임 요소에 연동된 소스의 로딩이 완료 된 후 이벤트가 발생한다. 보통 window아니면 document 다음에 쓰인다. 태그와 태그에 연결된 주소까지 불러온 다음에 실행된다. 실행시점이 조금 늦다. |
| ready() | 지정한 html 문서 객체의 로딩이 완료된 후 이벤트가 실행된다. load 이벤트보다 조금 더 빠르다. |
| error() | 이벤트 대상 요소에서 오류가 발생하면 실행된다. |
// 기본형 - 단독이벤트
$(document).ready(function(){...});
$(window).load(function(){...});
// 기본형 - 그룹이벤트
$(document).on('ready', function(){...});
$(window).on('load', function(){...});아래와 같이 이미지가 한개 있는 문서를 열어 개발자도구(F12)에 consol창으로 확인하면,
ready가 load보다 아래에 작성되었음에도 먼저 실행된 것을 볼 수 있다.
분명 속도에 차이가 있지만 유의미하게 큰 차이는 아니다.
See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
마우스 이벤트
마우스 이벤트를 사용하면 사용자가 마우스로 특정 행위를 할 때 이벤트를 발생시킬 수 있다.
| 마우스 이벤트 | |
| click() | 선택한 요소를 클릭하면 이벤트가 실행된다 |
| dblclick() | 선택한 요소를 더블클릭하면 이벤트가 실행된다. |
| mouseover() | 선택한 요소의 영역에 마우스 포인터가 들어오면 이벤트가 실행된다. |
| mouseout() | 선택한 요소의 영역에서 마우스 포인터가 벗어났을 때 이벤트가 실행된다. |
| hover() | 선택한 요소에 마우스가 올라갔을때와 벗어났을 때 각각 이벤트가 실행된다. |
| mousedown() | 선택한 요소에서 마우스 버튼을 눌렀을 때 이벤트가 발생한다. |
| mouseup() | 선택한 요소에서 마우스 버튼을 눌렀다가 떼었을 때 이벤트가 발생한다. |
| mouseenter() | 선택한 요소 범위에 마우스 포인터를 올렸을 때 이벤트가 발생한다. |
| mouseleave() | 선택한 요소 범위에 마우스 포인터가 떠났을 때 이벤트가 발생한다. |
| mousemove() | 선택한 요소 범위에서 마우스가 움직일 때마다 이벤트가 발생한다. |
// 기본형 : hover를 제외한 모든 이벤트 동일
$('요소').click(function(){ 코드... }) // 단독 이벤트
$('요소').on("click", function(){ 코드... }) // 그룹 이벤트
$('요소').click() - 강제 이벤트
// 기본형 : hover 이벤트는 단독 이벤트만 존재한다.
$('요소').hover(
function(){ 코드... }),
function(){ 코드... }) // 단독 이벤트
$('요소').hover() // 강제 이벤트1. click(), dblclick()
사용자가 마우스로 이벤트 대상을 클릭하거나 더블클릭하면 이벤트가 발생한다.
더블클릭 또한 클릭을 한번 하는 것이기 때문에 클릭 이벤트와 중복된다.
See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
2. mouseover(), mouseout(), hover()
mouseover()는 선택한 요소 위에 마우스 커서 올라가면 이벤트가 발생하고
mouseout()은 선택한 요소에서 마우스 커서가 벗어나면 이벤트가 발생한다.
hover()는 선택한 요소에서 마우스가 올라갔을 때와 벗어났을 때 각각 이벤트를 발생시킬 수 있다.
See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
3. mouseenter() mouseleave()
mouseenter() mouseleave() 이벤트는 mouseover(), mouseout() 이벤트와 무엇이 다를까?
mouseover(), mouseout()과의 차이점은 범위의 기준에 있다.
mouseenter()는 대상 요소의 경계 범위에 마우스 포인터가 들어오면 이벤트를 실행하고
mouseleave()는 대상 요소의 경계 범위에서 마우스 포인터가 벗어나면 이벤트를 실행한다.
mouseout은 부모 요소와 자식요소 각각의 범위를 구분하여 자식요소에서 부모요소로 마우스가 움직여도 다른 요소로 이동한 것으로 판단한다.
하지만 mouseleave는 그 요소가 가지고 있는 자식요소들까지 같은 범위로 판단하기 때문에 완전히 다른 상위태그나 형제태그로 나가야 이벤트가 발생한다.
예시에서 내용3에 마우스를 를 갖다 댄 다음 부모영역쪽으로 마우스를 이동해보면 그 범위를 좀더 확실히 알 수있다.
See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
4. mousemove()
mousemove 메서드는 마우스가 이동할 때마다 이벤트가 발생하는 메서드이다.
이 메서드를 활용해 마우스 커서 모양을 바꾸거나 마우스의 위치에 따라 요소가 바뀌도록 할 수 있다.
See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
vscode 에서 작성할 때 매개변수 e에 마우스를 갖다대면 아래와 같이 매개변수가 무엇을 뜻하는지 보여준다.
현재 parameter(매개변수) e는 제이쿼리의 이벤트 객체라고 알려주고있다.
그렇기 때문에 e.pageX는 현재 문서의 이벤트 객체의 X축 좌표를 의미하는 것이다.
* 마우스 이벤트 예시 사이트 추천
5. 마우스 이벤트 객체
| button | 마우스 버튼의 종류에 따라 값을 반환한다. |
| layerX | position을 적용한 요소를 기준으로 마우스 포인터의 X좌푯값을 반환한다. |
| layerY | position을 적용한 요소를 기준으로 마우스 포인터의 Y좌푯값을 반환한다 |
스크롤 이벤트
| 스크롤 이벤트 | |
| scroll() | 가로 세로 스크롤바가 움직일 때마다 이벤트가 발생한다. |
| wheel() | 마우스 휠을 움직일 때마다 이벤트가 발생한다. |
// 기본형 : 모든 이벤트 동일
$('요소').scroll(function(){ 코드... }); // 단독 이벤트
$('요소').on('scroll', function(){ 코드... }); // 그룹 이벤트
$('요소').scroll(); // 강제 이벤트1. scroll()
scroll은 대상 요소의 스크롤바가 이동할 때마다 이벤트를 발생시킨다.
문서의 스크롤은 window가 갖고 있다.
// 기본형
$('요소').scroll(function(){ 코드 ... }) - 단독이벤트
$('요소').on('scroll', function(){ 코드 ... }) - 그룹이벤트See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
2. wheel()
마우스 휠 이벤트의 주 이벤트는 scroll이벤트이다.
마우스 휠을 움직일 때마다 이벤트가 발생한다.
이때 이벤트 객체 안에 있는 deltaY, deltaY, deltaZ 프로퍼티를 함께 사용한다.
deltaX 프로퍼티는 마우스 휠을 한번 위로 올리거나 아래로 내렸을 때 가로 스크롤이 움직인 픽셀값을 반환한다.
deltaY 프로퍼티는 마우스 휠을 한번 위로 올리거나 아래로 내렸을 때 세로 스크롤이 움직인 픽셀값을 반환한다.
deltaZ 프로퍼티는 마우스 휠을 한번 위로 올리거나 아래로 내렸을 때 Z축이 움직인 픽셀값을 반환한다.
See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
포커스(폼) 이벤트
| 포커스(폼) 이벤트 | |
| focus() | 선택한 요소에 포커스가 생성되었을 때 이벤트를 발생하거나 강제로 포커스를 생성한다. |
| focusin() | 선택한 요소에 포커스가 생성되었을 때 이벤트를 발생한다. 대상 요소의 하위 요소 중 입력(input) 요소로 포커스가 이동하면 이벤트가 발생한다. |
| focusout() | 선택한 요소에서 다른 요소로 포커스가 이동되면 이벤트가 발생한다. 대상 요소의 하위 요소 중 입력(input) 요소에서 외부 요소로 포커스가 이동하면 이벤트가 발생한다. |
| blur() | 선택한 요소에 포커스가 다른 요소로 이동되었을 때 이벤트를 발생하거나 강제로 포커스를 없앨 때 사용한다 |
| change() | 이벤트 대상인 입력요소의 값이 변경되고, 포커스가 이동하면 이벤트가 발생한다. 그리고 이벤트를 강제로 발생시킬 때 사용한다. |
// 기본형 : 모든 이벤트 동일
$('요소').focus(function(){ 코드... }); // 단독 이벤트
$('요소').on('focus', function(){ 코드... }); // 그룹 이벤트
$('요소').focus(); // 강제 이벤트1. focus()
focus 이벤트는 요소에 포커스 됐을 때 발생하는 이벤트이다.
a 또는 input태그를 클릭를 클릭할 때 포커스가 발생하는데, 키보드 tap 키를 눌렀을 때도 요소에 포커스가 된다.
마우스가 없는 상황에서는 키보드를 이용하여 사이트를 이용해야 하는데, 이때 키보드만으로 사이트를 이용했을 때 불편하지 않도록 만들어주는 것을 '키보드 접근성'이라고 한다.
키보드 접근성을 높이려면 마우스 이벤트를 등록할 때 키보드 이벤트도 함께 등록해주어야한다.
포커스가 먼저 실행되고 클릭이 실행된다.
한번 버튼을 클릭하면 이미 포커스가 된 상태이기 때문에 반복해서 눌렀을 때 클릭이벤트만 실행된다.
다시 포커스 이벤트를 실행하려면 다른 곳을 클릭 후 돌아와야한다.
클릭 이벤트는 마우스를 뗀 후에 발생한다. 마우스를 누른 후 떼지 않았다면 포커스 이벤트만 실행된다.
See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
2. blur()
대상 요소에서 다른 요소로 포커스가 이동하거나 포커스를 잃으면 blur() 이벤트가 발생한다.
event를 클릭하거나 tap 키를 눌렀을 때 요소가 포커스를 얻어 글자 색이 빨간색으로 변하고
요소를 제외한 다른 공간을 클릭하면 포커스를 잃어 글자색이 검정색으로 변하는 것을 확인할 수 있다.
See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
3. change()
선택한 폼 요소의 값(value)을 새 값으로 바꾼다.
그리고 포커스가 다른 요소로 이동했을 때 이벤트가 발생한다.
See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
키보드 이벤트
| 키보드 이벤트 | |
| keypress() | 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생한다. 문자 키(a~z)를 제외한 키의 코드값을 반환한다. |
| keydown() | 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생한다. 키보드의 모든 키코드 값을 반환한다. |
| keyup() | 키보드의 키를 눌렀다가 뗐을 때 이벤트가 발생한다. |
// 기본형 : 모든 이벤트 동일
$('요소').keydowun(function(){ 코드... }); // 단독이벤트
$('요소').on('keydowun', function(){ 코드... }); // 그룹이벤트
$('요소').keydowun(); // 강제 이벤트이벤트를 실행할 함수에 매개변수 e를 넣고 e.keyCode() 메서드를 쓰면 내가 누른 키의 keyCode를 알 수 있다.
알아낸 키코드를 바탕으로 키코드가 동일할 때 이벤트가 발생하는 코드를 작성하면 된다.
아래에서는 switch문을 활용하여 작성하였다.
See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
이벤트 등록 방식
지정한 요소에 이벤트를 등록하는 방법에는 단독 이벤트 등록 방식과 그룹 이벤트 등록 방식, 라이브 이벤트 등록 방식이 있다.
한가지 동작에 대한 이벤트 등록을 하려면 단독 이벤트 등록 방식을 사용하고,
여러 동작에 대한 이벤트 등록을 하려면 그룹 이벤트 등록 방식을 사용한다.
라이브 이벤트는 동적으로 생성된 요소에 이벤트를 적용하려는 경우에 사용한다.
1. 단독 이벤트 등록 방식
단독 이벤트는 대상에 대한 한가지 동작에 대한 이벤트만 등록할 수 있다.
// 기본형
$('이벤트 대상').이벤트명(function(){ 코드; })2. 라이브 이벤트 등록 메서드
앞에서 배운 이벤트 등록 방식으로는 객체 조작 메서드에 의해 새롭게 생성, 복제된 요소에 이벤트를 등록할 수 없다.
동적으로 생성된 요소에도 이벤트를 넣어야 할 경우 라이브 이벤트 등록 메서드를 사용해야 한다.
// 기본형
$("document 또는 이벤트 대상의 상위 요소").on("이벤트 종류", "이벤트 대상", function(){
이벤트 핸들러;
})// 기본형(1) : on() 이벤트
$(document 또는 "이벤트 대상의 상위 요소").on("이벤트 종류", "이벤트 대상", function(){
이벤트 핸들러;
})3. 그룹 이벤트 등록 방식
그룹 이벤트는 이벤트 대상에 한가지 이상의 동작 이벤트를 넣을 때 사용한다.
1) on()
이벤트 대상 요소에 2개 이상의 이벤트를 등록한다.
사용 방식에 따라 이벤트를 등록한 이후에 동적으로 생성되거나 복제된 요소에도 이벤트가 적용된다.
// 기본형(1)
$('이벤트 대상').on('이벤트1 이벤트2 이벤트3...', function(){ 코드; })기본형(1)은 한가지 코드에 여러개의 이벤트를 등록하는 방법이다.
이벤트가 발생할 때마다 동일한 이벤트 핸들러가 실행된다.
// 기본형(2)
$('이벤트 대상').on({
'이벤트1 이벤트2 이벤트3' : function(){ 코드; }
})기본형(2)는 위의 기본형(1)과 같으나 이벤트를 객체로 저장했다는 차이가 있다.
이벤트가 발생할 때마다 동일한 이벤트 핸들러가 실행된다.
// 기본형(3)
$('이벤트 대상').on({
이벤트1 : function(){ 코드; },
이벤트2 : function(){ 코드; },
이벤트3 : function(){ 코드; }
})기본형(3)은 이벤트를 객체로 지정하여 여러개의 이벤트를 적용시킨다.
이벤트 명에 따라 각각의 핸들러를 가지고 있어 동작마다 다른 이벤트를 발생시킬 수 있다.
// 기본형(4) : 라이브 이벤트
$(document 또는 "이벤트 대상의 상위 요소").on("이벤트 종류", "이벤트 대상", function(){
이벤트 핸들러;
})기본형(4)는 on 메서드를 활용해 라이브 이벤트로 등록할 때 사용한다.
See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
2) bind()
이벤트 대상 요소에 2개 이상의 이벤트를 등록한다.
3) delegate()
선택한 요소의 하위 요소에 이벤트를 등록한다.
이벤트를 등록한 이후에 동적으로 생성되거나 복제된 요소에도 이벤트가 적용된다.
* on()라이브 이벤트와 문법상 다른 점은 이벤트 대상과 이벤트 종류의 자리가 서로 반대이다. (바뀌면 오류 발생)
// 기본형 : 라이브 이벤트
$(document 또는 '이벤트 대상의 상위요소').delegate("이벤트 대상", "이벤트 종류", function(){
이벤트 핸들러;
} )4) one()
이벤트 대상에 1개 이상의 이벤트를 등록한다. 지정한 이벤트가 1번 실행되고 자동으로 삭제 된다.
// 기본형 : 일반 이벤트
$("이벤트 대상 요소").one("이벤트명", function(){ 이벤트 핸들러 })
// 기본형 : 라이브 이벤트
$(document 또는 "이벤트 대상의 상위 요소").one("이벤트 종류", "이벤트 대상", function(){
이벤트 핸들러;
})See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
이벤트가 발생한 요소 추적하기
사이트 방문자가 이벤트를 발생시킨 요소의 정보를 구해올 때 this를 이용할 수 있다.
또한 이벤트가 발생한 요소의 index값을 구해올 수 있다.
1. this 선택자
이벤트 핸들러에서 $(this)를 사용하면 이벤트가 발생한 요소를 추적할 수 있다.
$(this)안에는 이벤트가 발생한 요소, 즉 해당 태그가 반환된다.
2. index() 메서드
이벤트를 등록한 요소 중 이벤트가 발생한 요소의 인덱스 값을 반환한다.
// 기본형 : 단독 이벤트
$('요소').이벤트명(function(){
$('요소').index(this);
})
// 기본형 : 그룹 이벤트
$('요소').on('이벤트명', function(){
$('요소').index(this);
})See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
이벤트 제거 메서드
이벤트 제거 메서드를 사용하면 이전에 등록했던 이벤트를 제거할 수 있다.
이때 이벤트를 어떤 종류로 등록했는지에 따라서 문법과 메서드 이름이 달라진다.
1. off()
off()메서드로 이벤트를 제거할 수 있다.
off()메서드를 사용하면 on()메서드로 등록한 이벤트를 제거 할 수 있다.
// 기본형(1) : 기본 이벤트 제거 방식
$('요소').off('제거할 이벤트 명')
// 기본형(2) : 라이브 이벤트 제거 방식
$(documnet 또는 '이벤트 대상의 상위요소').off('제거할 이벤트 명', '이벤트 대상')아래 예시를 통해 btn1과 btn2의 이벤트가 off() 메서드를 통해 지워진 것을 확인할 수 있다.
See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
2. unbind()
bind()메서드로 등록한 이벤트를 제거한다.
// 기본형 : 기본 이벤트 제거 방식
$('요소').bind('제거할 이벤트 명')3. undelegate()
delegate()메서드로 등록한 이벤트를 제거한다.
// 기본형(1) : 기본 이벤트 제거 방식
$('요소').undelegate('제거할 이벤트 명')
// 기본형(2) : 라이브 이벤트 제거 방식
$(documnet 또는 '이벤트 대상의 상위요소').undelegate('이벤트 대상', '제거할 이벤트 명')See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
이벤트를 제어하는 방법
1. 강제 이벤트 메서드 trigger()
이벤트가 강제로 발생했다는 말은 사용자의 행위에 의해 이벤트가 실행되는 것이 아니라,
이벤트 핸들러에 의해 이벤트가 자동으로 발생하는 것을 말한다
강제 이벤트는 단독 이벤트 메서드 형식과 trigger 이벤트 메서드를 사용해서 발생시킬 수 있다.
// 기본형(1) : 단독 이벤트 메서드
$('이벤트 대상').이벤트명();
// 기본형(2) : trigger 이벤트 메서드
$('이벤트 대상').trigger('이벤트명')아래 예시를 들어보겠다.
기존에 투명한 색상이었던 내용1에 강제로 클릭이벤트가 적용되어 배경색이 핑크색으로 바뀌었다.
내용2 또한 강제로 mouseover가 적용되어 '내용이 바뀝니다'로 글자가 변경되었다.
See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
2. 개발자 도구로 이벤트 확인
코드를 확인하며 이벤트가 적용되고 취소된 것을 확인할 수 있지만,
개발자 도구(F12)로도 이벤트가 적용되고 삭제되는 것을 확인할 수 있다.
See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
예시와 같이 코드를 짜고 개발자도구(F12)를 확인하면 Event Listeners 라는 탭을 확인할 수 있다.
이곳에서 적용된 이벤트를 확인할 수 있는데,
이벤트가 적용된 대상을 직접 클릭해야 해당 요소에 적용된 이벤트를 확인할 수 있다.
이곳에서 삭제 버튼을 눌러 이벤트를 조절해 볼 수 있다.
3. 버블링을 막는 프로퍼티 및 메서드 cancelBubble, stopPropagation()
자바스크립트에서 대다수의 이벤트는 버블링된다. (버블링이란?)
focus 이벤트와 같이 버블링 되지 않는 이벤트도 있지만 거의 모든 이벤트가 버블링된다.
이런 이벤트 버블링은 의도치않게 여러 요소의 이벤트가 중복되는 등 문제를 발생시킬 수 있다.
이를 막기위해 cancelBubble과 stopPropagation 프로퍼티를 사용한다.
cancelBubble은 이벤트 전파를 차단하는 속성을 가지고 있다.
기본값으로 false를 가지고 있는데 이를 true로 바꾸면 이벤트의 버블링을 막을 수 있다.
cancelBubble은 프로퍼티 이기 때문에 프로퍼티 형식으로 작성해야한다.
stopPropagation() 또한 이벤트 전파를 차단하는 메서드로, cancelBubble보다 자주 쓰이는 메서드이다.
stopPropagation()메서드는 버블링 뿐만 아니라 캡처링도 중단시는 메서드이기 때문에 신중히 사용하는 것이 좋다.
전파 단계에 따라 실행되어야 할 다른 이벤트 핸들러들 또한 함께 실행되지 않을 수 있기 때문이다.
// 기본형(1)
function (event) {
event.cancelBubble = true; // 기본값은 false이다.
}
// 기본형(2)
function (event) {
event.stopPropagation()
}4. 버블링을 발생시키는 요소 찾기 target, currentTarget
버블링이 발생했을 경우 부모요소는 이벤트가 어디서 발생했는지에 대한 정보를 가지고있다.
버블링을 발생시킨 가장 안쪽의 요소를 타겟(target) 요소라고 부른다.
타겟 요소를 찾기 위해서 target 혹은 currentTarget 프로퍼티를 사용한다.
단순히 target을 찾기 위해서는 event.target 과 같은 형식으로 사용하면 되지만 이는 말 그래도 HTML 태그 요소이므로 제이쿼리 객체로 사용하려면 $(event.target)으로 감싸야 메서드를 적용할 수 있게 된다.
// 기본형(1)
function (event) {
event.target
$(event.target) // 객체
}
// 기본형(2)
function (event) {
event.currentTarget
$(event.currentTarget) // 객체
}target 과 currentTarget은 무슨 차이점이 있을까?
target은 실제 이벤트가 발생한 요소를 말한다.
아래 예시에서 확인할 수 있듯이 실제로 마우스오버한 요소를 가리킨다.
실제 이벤트 핸들러는 form 요소에 적용되어있지만 버블링으로 인해 div와 p태그에도 이벤트 핸들러가 적용되었기 때문에 div와 p태그에서 이벤트가 발생했다고 보여주는 것이다.
하지만 currentTarget은 이벤트 핸들러가 작성되어있는 요소를 말한다.
아래 예시에서는 this이 event.currentTarget를 가리킨다.
See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
5. 태그의 기본 이벤트를 차단하는 preventDefault()
a태그나 button 처럼 기본 기능을 가진 태그들이 있다.
a태그는 링크를 연결하는 것이고 button 태그는 폼 요소를 submit 하는 기능을 기본으로 가지고있다.
이러한 기본 기능을 기본 이벤트라고 말한다.
기본 이벤트를 가진 태그에 새로운 이벤트를 연결할 경우 이벤트가 중복되게 된다.
이를 막기위해 return false; 를 이용하거나 preventDefault()메서드를 사용한다.
return false를 쓸 경우는 return이라는 강제 종료문을 만나기 때문에 다음 기능이 실행하지 않고 종료하여 중복실행되는 것을 막을 수있다.
하지만 return의 경우 강제 종료문이기 때문에 return다음에 코드를 작성할 경우 작성한 코드도 취소되는 결과를 가져온다.
preventDefault() 메서드의 경우 브라우저의 기본 동작을 중지하는 것이기 때문에 코드 앞에 작성하여도 브라우저의 기본 동작만 중지되고 코드는 무사히 실행된다.
이벤트 제거 메서드인 off()로는 기본이벤트가 제가되지 않는다.
// 기본형(1)
$('요소').이벤트(function() {
자바스크립트 코드;
return false;
}
// 기본형(2)
$('요소').이벤트(function(event) {
event.preventDefault();
자바스크립트 코드;
}예제
1. 문제(1)
1. 버튼을 클릭하면 클래스 fontSize안의 숫자가 증가, 감소, 초기화 된다.
2. 증감된 숫자값과 동일하게 #wrap의 font-size가 변한다.
<p class="zoomBtn">
<button class="zoomOut">-</button>
<button class="originBtn">100%</button>
<button class="zoomIn">+</button>
</p>
<p class="fontSize">14px</p>
<div id="wrap">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vero deleniti
animi blanditiis! Assumenda perferendis repellendus culpa nam repellat non
at dolore. Earum ad minima culpa labore distinctio, quas corrupti
deleniti.
</div>방법 1
See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
방법 2
See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
2. 문제(2)
1. 메뉴 목록에 a태그에 마우스 포인터를 올리거나 포커스를 이동하면 이벤트를 발생
2. 이벤트가 발생한 a태그의 글자색은 빨간색, 배경색은 흰색으로 변경하고 이외의 다른 메뉴는 비활성화
3. 마우스 포인터가 id값이 gnb인 요소를 벗어나면 메뉴 전체를 원래의 색으로 변경
방법 1
See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
방법 2
See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.
'자바스크립트(JavaScript) > 제이쿼리(jquery)' 카테고리의 다른 글
| [jquery] 애니메이션 메서드 (0) | 2024.08.28 |
|---|---|
| [jquery] 효과 메서드 (0) | 2024.08.28 |
| [Jquery] 객체 조작 메서드 (0) | 2024.08.20 |
| [Jquery] 제이쿼리 배열 관련 메서드 (0) | 2024.08.20 |
| [Jquery] 제이쿼리 선택자 총 정리 (0) | 2024.08.20 |