이벤트 :
사이트에 방문자가 취하는 모든 동작
핸들러 :
이벤트가 발생했을 때 호출되는 함수
단독 이벤트 등록 :
$("#btn").click(function(){
스크립트 코드
});
1. 이벤트 대상
2. 이벤트 종류
3. 이벤트 핸들러
그룹 이벤트 등록 :
$("#btn").on("이벤트 종류", function(){
스크립트 코드
});
ex)
<body>
<p class="btn1"><a href="#">이벤트 대상1</a></p>
<ul style="display:none;">
<li>리스트1</li>
<li>리스트2</li>
<li>리스트3</li>
</ul>
<p class="btn2"><a href="#">이벤트 대상2</a></p>
<ul style="display:none;">
<li>리스트4</li>
<li>리스트5</li>
<li>리스트6</li>
</ul>
</body>
$(function(){
$(".btn1 a").mouseover(function () {
alert('hello');
});
$(".btn1 a").focus(function () {
alert('hello');
});
});
$(function(){
$(".btn1 a").on("mouseoer focus", function () {
var ts = $(this);
ts.css("background-color","yellow");
});
});
$(function(){
$(".btn1 a").on("cllick", function () {
var ts = $(this);
ts.parent().next().show();
return false; // a태그에 href걸려있어서, 자동으로 주소로 이동하는걸 방지함
});
});
ts : 내가 현재 클릭하고 있는
parent() : 부모요소 즉, p태그가 됨
next() : 그 다음이므로 ul태그가 됨
show() : show이므로 display는 block으로 바뀜
$(function(){
$(".btn1 a").on("cllick", function () {
var ts = $(this);
$(".btn1").next("ul").filter(":visible").hide();
ts.parent().next().show();
return false;
});
});
btn1클래스의 ul요소들 중 보이는것(visible)들을 숨겨라(hide)
즉, 순서는 이벤트1이 숨겨지고 나서 이벤트2가 펼쳐지는 것
'Frontend > jQuery' 카테고리의 다른 글
| 제이쿼리 비동기 방식 (0) | 2022.10.31 |
|---|---|
| 효과 및 애니메이션 (0) | 2022.10.31 |
| 제이쿼리 기본 다지기 (0) | 2022.10.30 |
| jquery 콜백 함수 (0) | 2022.03.29 |
| [jquery] jquery 이용해 alert창 띄우기 (0) | 2022.03.24 |
댓글