Basic_How to grant event
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// Single Event
$(".btn").click(function(){
alert();
})
// Group Event
// 1. has common function
$(".btn").on("mouseover focus", function(){
alert();
})
// 2. has common function
$(".btn").on({"mouseover focus" : function(){
alert();
}
})
// 3. has each function
$(".btn").on({
"mouseover" : function(){
alert(1);
},
"focus" : function(){
alert(2);
}
})
Basic_delegate, one
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function () {
// delegate - 선택한 요소의 하위 요소에 이벤트 등록한다.
$(".btn_wrap").delegate(".btn_1.on", "mouseover focus", function () {
alert("HELLO!");
});
$(".btn_1").addClass("on");
// one - 일회성 이벤트를 준다.
$(document).one("mouseover focus", ".btn_2.on", function () {
alert("WELCOME!");
});
$(".btn_2").addClass("on");
});
Basic_off
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(function () {
// 해당 노드에 이벤트를 준다.
$(".btn_1").on("mouseover", function () {
alert("HELLO!");
});
$(document).on("mouseover", ".btn_2", function () {
alert("WELCOME!");
});
var btn_2 = $("<p><button class=\"btn_2\">버튼2</button></p>");
$("#wrap").append(btn_2);
// 해당 노드가 가지고 있는 이벤트를 제거한다.
$(".del_1").on("click", function () {
$(".btn_1").off("mouseover");
});
$(".del_2").on("click", function () {
$(document).off("mouseover", ".btn_2");
});
});
Basic_event execution order
1
2
3
4
5
6
7
8
9
10
11
12
13
$(function () {
// 이벤트 등록 후, 클래스 추가하여 이벤트가 들지 않음.
$(".btn_1.on").on("mouseover focus", function () {
alert("HELLO!");
});
$(".btn_1").addClass("on");
// 라이브 이벤트 등록 방식으로 이벤트를 등록 후 클래스 값 생성하면 이벤트 정상 작동.
$(document).on("mouseover focus", ".btn_2.on", function () {
alert("WELCOME!");
});
$(".btn_2").addClass("on");
});
Basic_change
1
2
3
4
5
$(function(){
$("#rel_site").on("change", function(){
$(".txt").text($(this).val());
});
});
Basic_dblclick
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function () {
$(".btn1").on("click", function (e) {
e.preventDefault();
$(".btn1").parent().next().css("background-color", "#ff0");
// === $(".txt1").css({"background-color":"#ff0"});
});
$(".btn2").on("click", function (e) {
$(".txt2").css({ "background-color": "#0ff" });
});
// 더블 클릭
$(".btn3").on("dblclick", function () {
$(".txt3").css({ "background-color": "#0f0" });
});
});
get all ids
1
$("[id^='depositBtn_']").click(function(){})
해당 ID를 포함하고 있는 모든 ID를 배열에 담아 이벤트를 준다.
checkbox event
1
2
3
4
5
6
7
8
9
10
11
12
13
checkboxEvent : function () {
$("input[name='checkbox']").change(function() {
// 화살표 함수 (=>) 는 함수 내부에서 this 가 바인딩되지 않기 때문에, 상위 코드 $(this).prop("checked")에서 this 는 체크된 체크박스를 가리키지 않았다.
if ($(this).prop("checked")) {
$cate.data.checkedLv2cds.push($(this).attr("id"));
$cate.data.checkedCategories.push($(this).closest("tr").find("td:eq(1)").text());
} else {
$cate.data.checkedLv2cds = $cate.data.checkedLv2cds.filter(v => v != $(this).attr("id"));
$cate.data.checkedCategories = $cate.data.checkedCategories.filter(v => v != $(this).closest("tr").find("td:eq(1)").text());
}
$cate.draw.categoryButton();
})
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let ifAllChecked = 0;
function firstCheck() {
$("#ch1").is(":checked") ? ifAllChecked++ : ifAllChecked--;
ifAllChecked === 2 ? $("#ch3").prop("checked", true) : $("#ch3").prop("checked", false);
}
function secondCheck() {
$("#ch2").is(":checked") ? ifAllChecked++ : ifAllChecked--;
ifAllChecked === 2 ? $("#ch3").prop("checked", true) : $("#ch3").prop("checked", false);
}
function allCheck(){
if($("#ch3").is(":checked")){
$("#ch1").prop("checked", true);
$("#ch2").prop("checked", true);
ifAllChecked = 2;
} else {
$("#ch1").prop("checked", false);
$("#ch2").prop("checked", false);
ifAllChecked = 0;
}
}