⭐<a> 너도?
<body>
<div class ="outer">
<h1>Outer</h1>
<a href="aaa" class="inner">
<h2>Inner</h2>
</a>
</div>
<script>
document.querySelector(".outer").addEventListener("click",function(){
console.log("outer....")
},false)
document.querySelector(".inner").addEventListener("click",function(event){
console.log("inner....")
event.stopPropagation()
},false)
</script>
</body>inner를 <a> 태그로 만들어 주었다
화면에서 보기
Inner을 클릭하면?
aaa로 가려고 한다
❗<a> 멈춰!!!
event.preventDefault()
<body>
<div class ="outer">
<h1>Outer</h1>
<a href="aaa" class="inner">
<h2>Inner</h2>
</a>
</div>
<script>
document.querySelector(".outer").addEventListener("click",function(){
console.log("outer....")
},false)
document.querySelector(".inner").addEventListener("click",function(event){
console.log("inner....")
event.stopPropagation()
event.preventDefault()
},false)
</script>
</body>event.preventDefault()를 사용하면 <a> 태그의 기능을 막는다
화면에서 보기
Inner을 눌러도 <a>가 반응하지 않는다
❗❗여기서 의문
아니 <a>를 안 쓰면 되지 왜 이렇게 복잡한 방법을 쓰는 거야????
😉그 이유는 바로 Bootstrap에서 Pagination 같은걸 사용하면 그 안에 <a>가 있는데 그걸 빼면 스타일 같은 게 깨질 때가 있다 이럴 때 사용한다
⭐너는 어디서 왔니?
event 가 어디서 걸렸는지 확인하려면 어떻게 해야 할까?
console.log(event.target)화면
event.target을 사용하면 이렇게 확인 가능하다
'JavaScript' 카테고리의 다른 글
| JavaScript 배열 (0) | 2022.04.27 |
|---|---|
| JavaScript 이벤트 (0) | 2022.04.25 |
| ⭐ JavaScript 버블링 , 캡쳐링 (0) | 2022.04.24 |
| 객체야 어디 있니~ 객체 검색 방법 (0) | 2022.04.24 |
| JavaScript 로 검색 키워드 만들기 (0) | 2022.04.24 |