JQuery
230217 JQuery 각종 이벤트 함수와 on()
주영재
2023. 2. 17. 19:13
제이쿼리 이벤트 함수
js에서 사용하던 이벤트함수에서 on이 빠진다.
$("선택자").click(function() {실행시킬구문})
on()
이벤트 위임
부모에다 이벤트를 걸면 자식이 전달받는다.
$("선택자").on("이벤트","선택자",function(){})
->$("선택자")에도 걸고, 자식에도 거는 형식임.
innerHTML로 태그를 그릴 때가 있다. 그럴 때 사용.
또한, 반복문을 돌릴 필요가 없다.
on함수는 이벤트체이닝에도 사용 가능.
jquery08.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- jquery -->
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<button id="btn">이벤트등록</button>
<input type="text" id="tag"/>
<select id="sel">
<option>1</option>
<option>2</option>
</select>
<div style="background-color: aqua;" id="mos">마우스이벤트</div>
<script>
//클릭
$("#btn").click(()=>{
console.log("click");
})
//키관련이벤트
$("#tag").keyup(function() {
console.log("key~");
})
//체인지
$("#sel").change(function(){
console.log("chan");
})
//마우스관련 이벤트
$("#mos").mouseenter(()=>{console.log("mouse enter")})
$("#mos").mouseleave(()=>{console.log("mouse leave")})
</script>
<hr/>
<h3>이벤트 위임방식 on()</h3>
<div id="box"></div>
<script>
setTimeout(() => {
var str="";
str+="<a href='#'>태그1</a>"
str+="<a href='#'>태그2</a>"
str+="<a href='#'>태그3</a>"
$("#box").html(str);
}, 2000); //2초 뒤에 태그생성
// $("a[href='#']").click(()=>{
// console.log("a링크 실행");
// });
//이 이벤트가 실행될 때 a태그는 없다. a태그 생성된 뒤 이벤트 적용 안된다.
//따라서, 부모에게 이벤트를 걸고 자식이 받게 해야 한다.
//(이벤트종류, 위임시킬선택자, 핸들러)
$("#box").on("click","a[href='#']",()=>{
event.preventDefault();//고유이벤트중지
console.log("a링크 실행");
});
</script>
</body>
</html>setTimeout으로 가정, 2초 뒤에 a태그가 생성된다.
script의 a태그의 이벤트를 걸어주는 함수가 실행될 때 a태그는 존재하지 않기 때문에 a태그가 그려진 후에 이벤트가 걸리지 않는다.
따라서, 부모에게 이벤트를 걸고 자식이 받게 하는 것.
