이벤트(Event)
✨ 이벤트 등록
이벤트를 등록하는 방법은 직접 등록과 on을 통한 등록이 있다.
-
$(selector).click(function); -
$(selector).on("click", functon);
※ on으로 생성한 이벤트는 off를통해 이벤트를 삭제할 수 있다.
on 을쓰는 것을 권장하기는 하지만 현업에서는 직접 등록하는 경우도 많다.
✨ 이벤트 종류
J-Query 에서 사용하는 이벤트는 굉장히 많이 있는데, 해당 글에서는 일부만 다루고자 한다.
만약 더 많은 내용이 궁금할 경우 API 사이트(http://api.jquery.com/category/events/)를 참고 하면 좋다!
click()클릭 시 발생dblclick()더블 클릭 시 발생mouseenter()마우스가 특정 영역으로 들어왔을 경우 발생mouseleave()마우스가 특정 영역 밖으로 나갔을 경우 발생mousedown()마우스 버튼 눌렀을 경우 발생mouseup()마우스 버튼 떼었을 경우 발생hover()마우스 오버 시 발생(mouseenter 와 mouseleave를 결합한 형태)focus()포커스가 들어왔을 시 발생blur()포커스를 잃었을 경우 발생(웹 접근성 상 사용 금지)
※ () 가 있으면 이벤트 함수, 없으면 이벤트 명이라고 생각하면 된다.
❕ on 이벤트 사용
on 이벤트 사용 : $(셀렉터).on('이벤트명', 실행함수) → 자동완성 x
❕ 2개의 버튼이 있고, 버튼생성 을 클릭하면 새로운 버튼이 나오고, 그 버튼을 누르면 경고창이 발생하도록 이벤트를 작성해보자!
<body>
<button id="btn">버튼 생생</button>
<button id="evtDel">이벤트 삭제</button>
<div style="margin:10px;"></div>
</body>먼저 버튼 생성 button을 클릭하면 click 라는 새로운 버튼이 생성되는 이벤트를 작성해주고,
이벤트 삭제를 누르면 이벤트를 삭제할 수 있도록 off를 사용해준다.
<script>
$('#btn').on('click', function(){
$('div').append('<button class="newBtn">click</button>');
})
});
$('#evtDel').click(function(){
$('#btn').off();
});
</script>위에 코드에서 버튼 생성을 눌렀을 때 생생된 click 라는 버튼을 누를 시 경고창을 보여주는 이벤트를 만들고자 할 경우 크게 3개의 방법이 있다.
<방법1> : 버튼을 생성한 다음 이벤트를 추가하는 방식 (클릭을 할 때마다 이벤트가 걸리기 때문에 추천x)
$('#btn').on('click', function(){
$('div').append('<button class="newBtn">click</button>');
$('.newBtn').on('click', function(){
alert('click');
})
});<방법2> : 함수를 추가해서 별도로 생성하는 방법 (가장 직관적이다.
$('#btn').on('click', function(){
$('div').append('<button class="newBtn">click</button>');
});
function clickEvt(){
alert('click');
}<방법3> : document 에 이벤트를 걸어두는 방 식(타켓을 지정) $(셀렉터).on('이벤트', '타겟', '실행함수');
$(document).on('click', '.newBtn', function(){
alert('click!!!');
})document 로만 걸어주면 전체 도규먼트에 이벤트가 다 걸리게 된다.
dovument에 이벤트를 걸어두고 타겟에서 이벤트 발생 시 함수를 실행하는 형태로 동작한다.
그렇다면 이번에는 다른 예시로 조금 더 자세히 살펴보자
4개의 p 태그가 있다고 가정하고, click, dblclick 시 색상을 바꾸는 이벤트를 만들어보자
var arr = ['yellow', 'skyblue', 'gray'];
var i = 0;
var $elem = $('p');
$('p').on('click', function(e){
console.log(e); // 이벤트 객체 (현재 일어난 이벤트의 모든 정보)
$(this).css({'color' : arr[i]});
i++;
if(i == arr.length){
i = 0;
}
});
$('p').on('dblclick', function(e){
console.log(e);
$(this).css({'color' : 'hotpink'});
});❗this
제이쿼리에서도 this를 사용할 수 있고, this는 이벤트를 당한 당사자를 의미한다.
❕ on의 복수개 이벤트 사용
on에는 특별한 사용법이 또 있는데, 바로 복수개의 이벤트를 동시에 작성할 수 있다는 것이다. (편리하게)
html에 div 태그가 있다고 가정하고 4개의 이벤트를 하나의 on 에 모두 작성하는 코드를 살펴보자
$('#mousezone').on({
'mouseenter' : function(e){
$(this).css({'background' : 'hotpink'});
}, 'mouseleave' : function(e){
$(this).css({'background' : 'lightseagreen'});
}, 'mousedown' : function(e){
$(this).css({'background' : 'skyblue'});
}, 'mouseup' : function(e){
$(this).css({'background' : 'plum'});
}
});❕ off로 특정 이벤트만 삭제
off는 전체를 삭제할 수도 있지만 여러개가 걸린 on에 대해서는 특정 이벤트만 삭제할 수도 있다.
$('#mousezone').off('mouseup'); hover
hover 는 mouseenter 과 mouseleave를 동시에 가지고 있는 이벤트 함수이다.
그래서 사용해 줄 때에는 2개의 함수를 사용해줘야 한다.
$('#overzone').hover(function(){
$(this).css({'background-color' : 'yellow'});
}, function(){
$(this).css({'background-color' : 'orange'});
});