가희의자기개발블로그
이벤트 핵심 내용 본문
01_일반 이벤트 등록
$대상.on("이벤트이름","이벤트리스너")02_단축 이벤트 등록
$대상.단축이벤트(이벤트리스너)jQuery에서는 일반적으로 많이 사용하는 이벤트를 좀더 쉽게 사용할 수 있게 단축 이벤트 메서드를 가지고 있다.
예를 들어, click이벤트를 등록하는 경우 단축 이벤트 메서드를 사용하면 다음과 같이 click()메서드를 이용해 처리할 수 있다.
03_등록 이벤트 제거
경우 1 : 특정 이벤트에 대한 리스너를 제거하고 싶은 경우
$대상.off("click",삭제하고 싶은 이벤트 리스너 명)
경우 2 : 특정 이벤트에 걸려있는 모든 이벤트 리스너를 제거하고 싶은 경우
$대상.off("click")
경우 3: 모든 이벤트 종류에 상관 없이 모든 이벤트를 제거하고 싶은 경우
$대상.off()
04_이벤트 한 번만 실행
$대상.one(이벤트 이름, 이벤트 리스너)05_기본 행동 취소
event.preventDefault()기본 행동이란 <a href="링크"> 태그 클릭시 click이벤트 발생 후 해당 링크로 이동하게 되는데 이런 행동을 기본 행동이라 한다.
모든 이벤트가 기본 행동을 취소 할 수 있는 건 아니다. 이벤트 발생 후 실행되는 기본 행동이 있는지 알려면 발생한 이벤트 객체의 cancelable프로퍼티 값을 확인하면 된다. 이 값이 true인 경우 이벤트 실행 후 기본 행동 기본 행동이 실행된다는 의미이다. 또한, 이벤트 객체의 preventDefault()메서드를 이용해 기본 행동이 실행되지 않게 할 수도 있다.
06_버블링 멈추기
event.stopProparation()버블링이란 이벤트 흐름의 마지막 단계의 흐름으로써 이벤트를 발생한 노드의 조상 노드를 따라 최상위 노드인 document객체까지 흐르게 됩니다.
모든 이벤트가 버블링이 발생하는 건 아니다. 이벤트가 버블링이 발생하는지 알려면 발생한 이벤트 객체의 bubbles 프로퍼티 값을 확인하면 된다. 이 값이 true일 경우 이벤트 객체에서 제공하는 stopPropagation()메서드를 이용해 버블링을 멈출 수 있다.
07_버블링 활용1: 하나의 이벤트 리스너로 여러 이벤트 처리하기
$대상.on("이벤트명","선택자",이벤트 리스너)on()메서드를 위의 사용법 처럼 3개의 매개변수를 이용해서 호출하면 좀더 쉽게 버블링을 이용할 수 있다.
<script>
$(document).ready(function() {
// 메뉴 항목에 클릭 이벤트 등록
$("ul.menu li").on("click", function() {
// 클릭한 메뉴 아이템의 정보 출력
alert($(this).html());
})
});
</script>
</head>
<body>
<ul class="menu">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</body>만약 이런식으로 코드가 짜여 있다면, on()메서드가 실행되면 각 메뉴 항목마다 이벤트 리스너가 등록되는 문제점을 가지고 있다.
이럴 경우 아래와 같이 코딩하면 된다.
<script>
$(document).ready(function(){
$("ul").on("click","li",function(e){
alert($(e.target).html())
})
});
</script>08_버블링 활용 2 : 라이브 이벤트
버블링을 활용하면 아직 만들어져 있지 않는 노드에서 발생하는 이벤트까지 처리 할 수 있다.
09_이벤트 발생시키기
$대상.trigger("이벤트 이름")수동으로 이벤트를 발생 시킬 수 있다.
10_사용자 정의 이벤트 만들기
방법1
var event = jQuery.Event("이벤트이름");
[event.데이터1 =값;
event.데이터2=값;
.....]
$대상.trigger(event);
방법2
var event = jQuery.Event("이벤트이름");
$대상.trigger(event[,데이터1=값,데이터2-값,....])방법1과 방법2 모두 처리 순서는 동일하다.
- 단계1 이벤트객체 생성
- 단계2 이벤트 발생 시 리스너에 보낼 데이터 생성
- 단계3 이벤트 발생
이 둘의 다른 점은 이벤트 발생시 리스너에게 데이터를 보내는 방법이다.
11_mouseover vs mouseenter 차이점
| 메서드 이름 | 설명 |
| mouseover/mouseout | 마우스 커서가 노드에 들어오거나 노드 밖으로 나가면 발생하는 이벤트이다. 만약 내부에 자식 노드가 있는 경우 자식 노드에서도 이벤트가 발생한다. 즉, 자식 노드는 독립적인 노드로 처리된다. |
| mouseenter/mouseleave | 마우스 커서가 노드에 들어오거나 노드 밖으로 나가면 발생하는 이벤트이다. 만약 내부에 자식 노드가 있는 경우 자식 노드에서 이벤트가 발생하지 않는다. 즉, 자식 노드는 부모 노드의 일부분으로 처리된다. |
이 둘은 언뜻 보면 동일한 이벤트 처럼 보이지만 완전히 다른 이벤트이다.
11_1 mouseover/mouseout 이벤트
mouseover/mouseout이벤트의 경우 parent 내부에 child가 포함 관계라 하더라도 독립적인 노드로 판단해 이벤트가 수없이 발생하게 된다.
11_2 mouseenter/mouseleave이벤트
이 메소드는 child를 parent의 일부로 판단해 이벤트가 오직 한번만 일어난다.
'프론트엔드 > JavaScript+JQuery' 카테고리의 다른 글
| 문서의 위치 및 크기 관련 기능 (0) | 2020.07.18 |
|---|---|
| 요소의 위치 및 크기 관련 기능 (0) | 2020.07.17 |
| 이벤트 소개 (0) | 2020.07.15 |
| 속성 핵심내용 (0) | 2020.07.14 |
| 속성 소개 (0) | 2020.07.14 |