- 1)버튼클릭이벤트
1. 주석친부분 -> 버튼하나하나 이벤트주기
2. 버블링으로 하기
3. 버튼에 value값 줘서 가져오기
4. tagName으로 가져오기(대문자로 적어줘야 한다!!)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.7.0.js"></script>
<script>
$(document).ready(function() {
//1번
// $("#btn1").click(function() {
// alert("btn1");
// $("#div").text("btn1");
// })
// $("#btn2").click(function() {
// alert("btn2");
// $("#div").text("btn2");
// })
// $("#btn3").click(function() {
// alert("btn3");
// $("#div").text("btn3");
// })
$("#event").click(function(event) {
//2번
// if(event.target.id == "btn1") {
// alert("btn1");
// $("#div").text("btn1");
// }else if(event.target.id =="btn2") {
// alert("btn2");
// $("#div").text("btn2");
// }else if(event.target.id =="btn3") {
// alert("btn3");
// $("#div").text("btn3");
// }
//3번
// if(event.target.value != undefined) {
// $("#div").html(event.target.value);
// }else {
// $("#div").html("div클릭");
// }
//4번
if(event.target.tagName == "BUTTON") {
$("#div").html(event.target.value);
}else if(event.target.tagName == "DIV"){
$("#div").html("div클릭");
}
})
});
</script>
</head>
<body>
<div id="div"></div>
<hr>
<div id="event">
<button id="btn1" value="btn1">btn1</button><br>
<button id="btn2" value="btn2">btn2</button><br>
<button id="btn3" value="btn3">btn3</button>
</div>
</body>
</html>- 2)keyup이벤트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.7.0.js"></script>
<script>
$(document).ready(function() {
$("input[name=texts]").keyup(function(event) {
// $("div").html($("input[name=texts]").val());
$("div").html(this.value);
// $("div").html(event.target.value);
})
})
</script>
</head>
<body>
<div></div>
<input type="text" name="texts">
<button>전송</button>
</body>
</html>'JQuery > 연습' 카테고리의 다른 글
| 이클립스에서 jquery로 ajax써보기 + 자바스크립트랑 비교 (0) | 2023.07.05 |
|---|
