클릭 이벤트
1. .click 사용
$("클릭 요소").click(function() {
$("this").css("font-weight", "bold");
// 여기서 this는 클릭 요소와 동일
});
2. .on 사용
인자가 2개일 때
$("대상 요소").on("이벤트", function(){
$(this).css("font-weight", "bold");
// 여기서 this는 .hideReply
});
예시
$(".hideReply").on("click", function(){
$(this).css("font-weight", "bold");
// .hideReply 요소를 클릭했을 경우,
// hideReply 클래스에 폰트를 진하게 적용
});
인자가 3개일 때
$("범위 제한").on("이벤트", "대상 요소", function(){
$(this).css("font-weight", "bold");
});
예시
$("body").on("click", ".hideReply", function(){
$(this).css("font-weight", "bold");
// body 태그안에
// .hideReply 요소를 클릭했을 경우,
// hideReply 클래스에 폰트를 진하게 적용
});
.click과 .on의 차이점
동적으로 이벤트를 바인딩 할 수 있는지 없는지의 차이
.on은 동적으로 생성된 태그에도 이벤트 바인딩이 가능하지만,
.click은 최초에 선언된 태그에만 이벤트 바인딩 가능이다.
'Frontend > JQuery' 카테고리의 다른 글
제이쿼리 이벤트 바인딩 및 강제 실행하기 (0) | 2023.10.15 |
---|---|
제이쿼리 - 마우스 관련 이벤트, css 속성 (0) | 2022.12.02 |
제이쿼리 함수 - 요소 찾기 (0) | 2022.11.17 |