Kosta DevOps 과정 280기/Java
이벤트 연결하기
by 롯슈83
2024. 7. 11.
- 노드.이벤트이름(on~)= function(){}
- 동적으로 추가된 요소에 대해서는 이벤트가 붙지 않는다.
- 노드.addEventListener("이벤트 이름", function(){});
- 아래와 같은 구조이고 각각에 대하여 이벤트 연결이 되어 있을 때 a를 누르면 p 를 누른 것이 되고 inner, outer 를 누른 것이 되기 떄문에 부모 노드로 이벤트가 전파된다. 만약 부모 노드로 이벤트 전파를 제거하려면 stopPropergation을 실행한다.
<!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>
window.onload = function(){
document.querySelector("#outer").addEventListener("click", function(){
alert("아우터");
});
document.querySelector("#inner").addEventListener("click", function(){
alert("이너");
});
document.querySelector("#p").addEventListener("click", function(){
alert("피");
});
document.querySelector("#a").addEventListener("click", function(){
alert("앵커");
});
}
</script>
<style>
div,p,a{
border: 1px solid salmon;
margin: 32px;
}
</style>
</head>
<body>
<div id="outer">
<div id = "inner">
<p id="p"><a id="a" href="#">hello</a></p>
<!--a를 누르면 p도 눌리고 div 도 눌린 것이다.-->
</div>
</div>
</body>
</html>
- stopPropagation : 부모에게도 이벤트를 전닿해주고 싶지 않을 때 사용
<!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>
window.onload = function(){
document.querySelector("#outer").addEventListener("click", function(){
alert("아우터");
});
document.querySelector("#inner").addEventListener("click", function(){
alert("이너");
});
document.querySelector("#p").addEventListener("click", function(){
alert("피");
});
document.querySelector("#a").addEventListener("click", function(){
alert("앵커");
event.stopPropagation();
//부모노드로의 이벤트 전파를 제거하는 함수
});
}
</script>
<style>
div,p,a{
border: 1px solid salmon;
margin: 32px;
}
</style>
</head>
<body>
<div id="outer">
<div id = "inner">
<p id="p"><a id="a" href="#">hello</a></p>
<!--a를 누르면 p도 눌리고 div 도 눌린 것이다.-->
</div>
</div>
</body>
</html>
- event.target 을 이용하여 이벤트의 주체를 알아낼 수도 있다.
- 위와 같이 계층형의 노드로 구성되어 있을 때에 부모노드에만 이벤트를 연결하여 누가 이벤트가 발생하였는지 판별할 수 있다.
- target : 이벤트 발생 요소
- target.tagName : 이벤트 발생 요소의 태그 이름 -> 대문자로 나옴
- target.parentElement : 이벤트 발생 요소의 부모 노드를 찾아줌
- 이것들을 이용해서 동적으로 생성된 요소의 부모에게 이벤트를 걸어서 이벤트가 발생이 된 요소에 이벤트를 연결할 수 있다.
<!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>
window.onload = function(){
document.querySelector("#btnAdd").onclick=function(){
let data = '<div id = "inner"><p id="p"><a id="a" href="#">hello</a></p></div>';
document.querySelector("#outer").innerHTML+= data;
}
document.querySelector("#outer").addEventListener("click", function(event){
let target= event.target;
//a를 누르면 이벤트의 주체는 앵커태그이마.
//조상 태그들을 거슬러 올라감
//p를 만날 때까지 부모 노드를 찾아 target 에 담는다.
while(true){
target = target.parentElement;
if(target.tagName === "P"){
break;
}
}
target.style.background ="pink";
});
}
</script>
<style>
div,p,a{
border: 1px solid salmon;
margin: 32px;
}
</style>
</head>
<body>
<div id="outer">
<div id = "inner">
<p id="p"><a id="a" href="#">hello</a></p>
<!--a를 누르면 p도 눌리고 div 도 눌린 것이다.-->
</div>
</div>
<button id="btnAdd">추가</button>
</body>
</html>
