2021. 7. 8. 02:48ㆍfront-end/JavaScript
event.target( )
event 인터페이스의 target 속성은 event 가 전달한 객체에 대한 참조이다.
이는 이벤트의 버블링 또는 캡처 단계에서 이벤트 핸들러를 호출하는
event.currentTarget 과는 다르다.
event.target은 이벤트버블링의 가장 마지막에 위치한 최하위의 요소를 반환한다.
즉 클릭된 요소를 기준으로 사용하는 경우 event.target을 사용한다.
이벤트 리스너 호출
이벤트 리스너가 등록되고 해당 객체나 요소에 지정된 타입의 이벤트가 발생하면, 브라우저는 자동으로 등록된 이벤트 리스너를 호출한다.
이때 이벤트 리스너는 인수로 이벤트 객체(event object)를 전달받으며, 식별자를 통해 전달받은 이벤트 객체를 참조한다.
이벤트 객체(event object)
이벤트 객체(event object)란 특정 타입의 이벤트와 관련이 있는 객체다.
이벤트 객체는 해당 타입의 이벤트에 대한 상세 정보를 저장하고 있다.
모든 이벤트 객체는 이벤트의 타입을 나타내는 type 프로퍼티와 이벤트의 대상을 나타내는 target 프로퍼티를 가진다.
이러한 이벤트 객체는 이벤트 리스너가 호출될 때 인수로 전달된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript EventListener Call</title>
</head>
<body>
<h1>이벤트 객체</h1>
<button id="btn">눌러보세요!</button>
<p id="text"></p>
<script>
var btn = document.getElementById("btn");
// 아이디가 "btn"인 요소를 선택함.
btn.addEventListener("click", clickBtn);
// 선택한 요소에 click 이벤트 리스너를 등록함.
function clickBtn(event) {
document.getElementById("text").innerHTML =
"이 이벤트의 타입은 " + event.type + "이며,
이벤트의 대상은 " + event.target + "입니다.";
}
</script>
</body>
</html>이벤트 리스너 호출
addEventListener() 메소드를 사용하면 하나의 이벤트 타입에 여러 개의 이벤트 리스너를 등록할 수 있다.
이때 특정 타입의 이벤트가 발생하면 브라우저는 다음과 같은 순서로 이벤트를 호출하게 된다.
1. 이벤트의 대상이 되는 객체나 요소에 프로퍼티로 등록한 이벤트 리스너를 가장 먼저 호출한다.
2. 그 후 addEventListener() 메소드를 사용하여 등록한 이벤트 리스너를 등록한 순서대로 호출한다.
더 나아가 이벤트 발생을 취소하는 것은 뭐지?
이벤트 기본 동작의 취소 : preventDefalult()
preventDefalult() 메소드나 returnValue 프로퍼티를 이용하면, 이러한 기본 동작의 실행을 취소할 수 있다.
<!DOCTYPE html>
<html>
<body>
<a id="myAnchor" href="https://w3schools.com/">Go to W3Schools.com</a>
<p>The preventDefault() method will prevent the link above from following the URL.</p>
<script>
document.getElementById("myAnchor").addEventListener("click", function(event){
event.preventDefault()
});
</script>
</body>
</html>>> 저렇게 addEventListener 안에서 click, function(event){
event.preventDefault( ) 시켜버리면 a태그의 id값을 클릭했을 시, href="url주소" 로 가게 되는 것을 (동작을 취소)막아버린다.
}
주로 사용되는 경우는
1. a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우
2. form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨)
참고한 문서
https://programming119.tistory.com/100
[JS] event.preventDefault() 간단 설명 😊/ preventDefault란?
preventDefault 란? a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행됩니다. preventDefault 를 통해 이러한 동작을 막아줄 수 있습니다. 주로 사용되는 경우는 1. a 태
programming119.tistory.com
https://www.w3schools.com/jsref/event_preventdefault.asp
preventDefault() Event Method
preventDefault() Event Method ❮ DOM Events ❮ Event Object Example Prevent a link from opening the URL: document.getElementById("myAnchor").addEventListener("click", function(event){ event.preventDefault() }); Try it Yourself » More "Try it Yourself
www.w3schools.com
'front-end > JavaScript' 카테고리의 다른 글
| [JavaScript] CSS 변수 사용과 JS (0) | 2021.08.22 |
|---|---|
| [Javascript] await / async 에 대해..(비동기 처리) (0) | 2021.07.14 |
| [JavaScript] strict Mode(엄격모드) 라고 아십니까? (0) | 2021.07.06 |
| [Javascript ] 콜백함수 남용에 대한 위험성.. (0) | 2021.07.06 |
| [JavaScript] 웹 브라우저에 무슨 일이 ?? What happened to web Browser? (0) | 2021.07.05 |