이벤트 객체
이벤트 발생시 실행되는 함수의 (인자값)으로 현재 실행되는 event객체를 넣어준다.
stopPropagation() : 이벤트 전파를 막는다.(버블링 중단하기)
target : 이벤트를 적용한 타겟 속성
currentTarget : 실제 이벤트가 걸려있는 타겟 속성
preventDefault() : 고유특성을 가진 태그의 이벤트를 제거
다중이벤트에서만 사용하는건 아님. this를 대체할수도 있음
event객체가 자동으로 생성되므로 function()안에 변수를 넣지 않아도 event객체 사용 가능
badcase
<!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>
</head>
<body>
<h3>여러 이벤트를 한번에 걸어주기</h3>
<ul>
<li class="item">1.홍길동</li>
<li class="item">2.홍길자</li>
<li class="item">3.이순신</li>
<li class="item">4.강감찬</li>
<li class="item">5.둘리</li>
</ul>
선택한 태그의 값:
<p class="result"></p>
<script>
var item = document.querySelectorAll(".item");
var result = document.querySelector(".result");
//이 방법은 비효율적임-태그가 10000개라면?
//좋은 코드가 아닙니다.
for (var i = 0; i < item.length; i++) {
item[i].onclick = function () {
result.innerHTML = this.innerHTML;
};
}
</script>
</body>
</html>이 방법은 비효율적임. 태그가 늘어나면 그만큼 for문을 돌려야 한다.
goodcase
<!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>
</head>
<body>
<h3>이벤트 전파 특성 활용하기</h3>
<ul class="parent">
<li>1.홍길동</li>
<li>2.홍길자</li>
<li>3.이순신</li>
<li>4.강감찬</li>
<li>5.둘리</li>
</ul>
선택한 태그의 값:
<p class="result"></p>
<script>
var parent = document.querySelector(".parent");//ul
var result=document.querySelector(".result");
parent.style.cursor="pointer";
//부모에 이벤트를 걸면 자식한테 이벤트가 전파됩니다.
parent.onclick=function(e){
//이벤트객체-이벤트함수에 첫번째 매개변수로 자동 전달됩니다.
//console.log(e);//PointEvent
//console.log(event);//직접 event라고 해도 같은 결과가 나온다
//console.log(event.target);//이벤트가 동작된 실제 태그
//console.log(event.currentTarget);//실제 이벤트가 걸려 있는 태그
if(e.target.tagName!="LI") return;//태그네임이 대문자임. console.dir()로 확인
result.innerHTML=e.target.innerHTML;
}
</script>
</body>
</html>사용할 함수나 태그이름은 console.dir()로 확인.
if(e.target.tagName!+"LI") return; 을 통해 li가 아닌 것을 클릭했을 때는 이벤트가 동작하지 않도록.
event.target은 원하는 위치의 태그를 조정할 수 있어서 사용이 편리하고 변수생성을 안해도 된다.
'JS' 카테고리의 다른 글
| 230103 JS 이벤트객체 활용 실습2 (0) | 2023.01.03 |
|---|---|
| 230103 JS 이벤트객체 활용 실습 (0) | 2023.01.03 |
| 230103 JS 클래스 속성제어-toggle실습 (0) | 2023.01.03 |
| 230102 JS 클래스 속성 제어 (0) | 2023.01.02 |
| 230102 JS 노드생성,이동,삭제 실습 (1) | 2023.01.02 |
