웹 페이지에서 사용자의 어떠한 행위가 발생한 것
이벤트 속성과 이벤트 핸들러를 활용
설정방법
btn1.onclick = function(){}
함수 안에서 변수 대신 this를 사용할 수 있다
요소 내부에 이벤트를 작성하고 script 태그에 있는 함수를 호출하는 방식
W3C 에서 공식적으로 지정한 모델
한 번에 여러 이벤트 핸들러 설정 가능
const 변수명 = document.querySelector("선택자")
변수명.addEventListener("click", function(){})
인라인 이벤트
<button onclick="func1();">인라인이벤트</button>
// 자바스크립트 방식
function func1(){
console.log("인라인이벤트 모델");
}
고전 이벤트
$.이벤트명(function(){})
$(선택자)로 표현 가능하기 때문에 바로 사용하기 용이하다
// 자바스크립트 방식
btn1.onclick = function(){
console.log("고전이벤트 모델");
}
on / off
$(선택자).on("이벤트이름", (function(){});
// 자바스크립트 방식
btn1.addEventListener("click", function(){
console.log("표준이벤트 모델");
})
일괄적용 가능하다
예외를 주고 싶다면 index를 이용할 수 있다
왕중요 >> $(document).on(이벤트, 이벤트적용태그, function(){})
const d1 = $(".d1");
// d1클래스를 가진 div 4개를 가져온다
// selectAll 처럼 같은 클래스를 가진 요소를 배열로 가져온다
d1.on("click", function(){
const divs = $(".d1");
const index = divs.index(this);
console.log(this.text());
console.log(index);
})
// 새로 발생한 d1 div에게 이벤트 걸어주고 싶지 않으면, 지엽적으로 걸어주면 된다
$(document).on("click", ".d1", function(){
const divs = $(".d1");
const index = divs.index(this);
console.log($(this).text());
console.log(index);
})
// 새로 생긴 애들한테도 같은 이벤트를 걸어줄 거면, 문서 전체에 대해서 걸어주면 된다
// 문서 전체를 선택자로 지정. 문서 중 d1을 가진 태그에 event 발생시키는 함수
$("#btn1").on("click", function(){
const newDiv = $("<div>test-4</div>");
newDiv.addClass("d1");
$("#test1").append(newDiv);
})
// 버튼을 클릭하면 div를 추가하여 div를 감싼 test에 추가하는 event
trigger / 만들어진 함수.click()
$("#allLevelup").on("click", function(){
const countSpan = $(".levelup br").prev();
levelupBtn.trigger("click"); // 트리거
// leverupBtn.click(); 직관적인 방법
})
this가 있을 때 사용할 수 있다
<div id="div-wrap">
<div class="d1">1</div>
<div class="d1">2</div>
<div class="d1">3</div>
<div class="d1">4</div>
</div>
예를 들어 div-warp이 감싸고 있는 4개의 div가 있다고 가정했을 때,
$(".d1").on("click", function(){
const index = $(".d1").index(this);
// $(".d1") : 인덱스를 조회할 범위
// .index(this) : this는 클릭한 div
console.log(index);
})
d1 클래스를 가진 div중 1개에 클릭이 되었을 때 이벤트가 발생한다
클릭된 div가 $(".d1")의 범위 중 몇 번째 인덱스에 존재하는지 리턴한다
click | dblclick | mousedown | mouseup | mousemove | mouseout | mouseenter | mouseleave | mouseover | scroll
$("#click").on("click", function(){
$(this).css("color","red");
})
$("#dblclick").on("dblclick", function(){
$(this).css("color","blue");
})
$("#mousedown").on("mousedown", function(){
$(this).css("color", "red");
})
$("#mousedown").on("mouseup", function(){
$(this).css("color", "blue");
}) //up이벤트 주지 않으면 다운된 채로 바뀌지 않음
$(document).on("mousemove",function(event){ //(e) 키코드 정보볼 때 썼던 매개변수
const html = "x좌표 : "+event.pageX+", y좌표 : "+event.pageY;
$("#mousemove").text(html);
})
$("#input1").on("focusin", function(){
$(this).css("background-color","skyblue");
})
$("#input1").on("focusout", function(){
$(this).css("background-color","transparent");
}) // out이벤트 주지 않으면 in으로 넣어준 컬러 그대로 적용
$("#input2").on("change", function(){
console.log("input2 변경값 : "+$(this).val());
}) // 입력창에서 나갔을 때 직전 입력값과 다르면 동작
$("#submit").on("click", function(event){
const input1 = $("#input1");
if(input1.val()==""){
event.preventDefault();
// 기본이벤트 제거
// 제출 안 됨
input1.focus();
}
})
페이지에 애니메이션 효과를 만들기 위한 메서드 집합
$.메서드명([speed | easing | callbak]);
speed : 실행속도 (ms단위)
callback : 효과 메서드 수행 후 수행할 함수 저장 (모든 진행 끝난 후 실행)
easing : 변경되는 지점별 속도
화면에 요소를 띄우고 지우는 효과
라인에 display : none이 들어갔다가 style이 적용되는 방식
const div = $("#div"); // 효과가 적용될 div
$("#btn1").on("click", function(){
div.show(500);
})
$("#btn2").on("click", function(){
div.hide(500);
})
$("#btn3").on("click", function(){
div.toggle(3*1000);
})
요소가 위 아래로 접었다가 사라지는 효과
slideDown, slideUp, slideToggle은 기본적으로 0.4초의 시간이 걸려 있다
$("#btn4").on("click", function(){
div.slideDown();
})
$("#btn5").on("click", function(){
div.slideUp();
})
$("#btn6").on("click", function(){
div.slideToggle();
})
요소가 화면에서 서서히 사라졌다 나타나는 효과
$("#btn7").on("click", function(){
div.fadeIn(2000);
})
$("#btn8").on("click", function(){
div.fadeOut();
})
$("#btn9").on("click", function(){
div.fadeToggle();
})
$선택자.animate({변경할 css 속성},[speed], [easing], [callback])
단, easing을 사용하기 위해서는 jQuery-ui 사용해야 한다
jQuery-ui를 사용하면 더 많은 속성을 적용할 수 있다
$("#btn10").on("click", function(){
div.animate(
{
"width" : "100px",
"height" : "50px",
"opacity" : "0.2",
"background-color" : "red // 적용되지 않는다
},
3*1000 // speed
)
})