728x90
마우스에 따라오는 사진
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#wrapper {
width: 60vw;
height: 60vh;
border: 1px solid black;
}
#psy {
position: absolute;
width: 110px;
height: 110px;
background-image: url("./images/all0.jpg");
background-size: 110px 110px;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="psy"><br>난<br>성연<br>이얌 >-ㅇ</div>
<div id="wrapper" onmousemove="f_move()">
</div>
<script>
var id_psy = document.getElementById("psy");
function f_move() {
id_psy.style.left = event.clientX + "px";
id_psy.style.top = event.clientY + "px";
// console.log("마우스X좌표: ", event.clientX);
// console.log("마우스Y좌표: ", event.clientY);
}
</script>
</body>
</html>
이벤트가 상위 부모에게 전달(이벤트 버블링)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#grandMother {
width: 200px;
height: 200px;
border: 1px solid black;
}
#mother {
position: relative;
left: 50px;
top: 50px;
width: 100px;
height: 100px;
border: 1px solid pink;
}
#me {
position: relative;
left: 10px;
top: 10px;
width: 50px;
height: 50px;
border: 1px solid tomato;
}
</style>
</head>
<body>
<div id="grandMother" onmouseover="f_gm()">
<div id="mother" onmouseover="f_mo()">
<div id="me" onmouseover="f_me()">성연 >_ㅇ</div>
</div>
</div>
<script>
function f_gm() {
alert("나얌 할머닛");
}
function f_mo() {
alert("나는 엄마얌")
}
function f_me() {
alert("난 나얌")
}
</script>
</body>
</html>
상위 부모에 이벤트 전달되는거 막기
event.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>
<style>
#grandMother {
width: 200px;
height: 200px;
border: 1px solid black;
}
#mother {
position: relative;
left: 50px;
top: 50px;
width: 100px;
height: 100px;
border: 1px solid pink;
}
#me {
position: relative;
left: 10px;
top: 10px;
width: 50px;
height: 50px;
border: 1px solid tomato;
}
</style>
</head>
<body>
<div id="grandMother" onmouseover="f_gm()">
<div id="mother" onmouseover="f_mo()">
<div id="me" onmouseover="f_me()">성연 >_ㅇ</div>
</div>
</div>
<script>
// 이벤트가 상위 객체에 전달되는 것을 이벤트 버블링이라고 부름(짜증남)
function f_gm() {
alert("나얌 할머닛");
}
function f_mo() {
event.stopPropagation();
alert("나는 엄마얌")
}
function f_me() {
event.stopPropagation();
alert("난 나얌")
}
</script>
</body>
</html>
디폴트이벤트막기
a태그 클릭이벤트 기능을 가지고 있음(디폴트이벤트)
<a href="https://naver.com" onclick="f_check()">네이버</a>
alert뜨고 자동으로 페이지 이동해버림!
<body>
<a href="https://naver.com" onclick="f_check()">네이버</a>
<script>
function f_check() {
alert("난 네이버야");
}
</script>
</body>
이를 막고싶을 때아래의 코드 사용
alert창만 뜨고 네이버로 이동죄니는 않음
event.preventDefault(); // 내장된 기본 이벤트 막기더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://naver.com" onclick="f_check()">네이버</a>
<script>
function f_check() {
event.preventDefault();
alert("난 네이버야");
}
</script>
</body>
</html>
***
이벤트 전파 막기
event.stopPropagation();
내장된 기본 이벤트 막기
event.preventDefault();
이렇게 사용하면 나중에 디버깅하기 어려워
href에 javascript 코드를 연결시키면 디버깅이 아주 어려워지니 쓰지말자!!!!!
클릭 하나에 alert가 두 개 실행(함수 두 개가 실행!) => 프로그램이 꼬여버린다.
<body>
<a href="javascript:f_ck2()" onclick="f_check()">네이버</a>
<script>
function f_ck2(){
alert("나도 실행 될껄");
}
function f_check() {
// event.preventDefault();
alert("난 네이버야");
}
</script>
</body>