728x90
반응형
addEventListener() 함수
- 한 요소에 여러 이벤트가 발생했을 때 이를 동시에 처리하기 위한 함수
- 이벤트가 발생한 요소에 이벤트 처리기를 연결해주는 함수
element.addEventListener(이벤트명, 실행할이벤트리스너, 이벤트전파방식)
1. 이벤트 명 : 이벤트 리스너를 등록할 이벤트 타입을 문자열로 전달
2. 실행할 이벤트 리스너 : 지정된 이벤트가 발생했을 때 실행할 이벤트 리스너를 전달
3. 이벤트 전파 방식 : false면 버블링(bubbling) 방식으로, true면 캡처링(capturing) 방식으로 이벤트를 전파
(디폴드값 false이고 생략가능)
[출처] www.tcpschool.com/javascript/js_event_eventListenerRegister
- 버블링(bubbling) 방식
: DOM의 자식 노드에서 부모 노드로 이벤트가 전달되는 것
: 이벤트가 발생한 요소부터 시작해서, DOM 트리를 따라 위쪽으로 올라가며 전파되는 방식
- 캡처링(capturing) 방식
: DOM의 부모 노드에서 자식 노드로 이벤트가 전달되는 것
: 이벤트가 발생한 요소까지 DOM 트리의 최상위부터 아래쪽으로 내려가면 전파되는 방식
예시)
<body>
<h1 id="title" style="background-color: salmon; color: snow;
width: 300px; height: 40px; text-align: center;"> Coding With Jina </h1>
<script>
const change = document.querySelector("#title");
change.addEventListener("click", changeText, false);
function changeText(){
change.innerHTML="환영합니다!";
}
</script>
</body>
결과)
클릭하면
환영합니다!로 텍스트가 바뀜:)
728x90
반응형
'Coding With Jina > JavaScript' 카테고리의 다른 글
| [자바스크립트] 배열에서 요소 랜덤으로 출력하기 (0) | 2021.01.13 |
|---|---|
| [자바스크립트] Event의 종류( addEventListener, removeEventListener 메서드) (0) | 2021.01.13 |
| [자바스크립트] 날짜계산기 만들기 (0) | 2021.01.06 |
| [자바스크립트] input date 입력값 확인 눌러서 출력하기 (0) | 2021.01.06 |
| [자바스크립트] 시간 단위 그리고 밀리초로 바꾸는 getTime() 함수 (0) | 2021.01.04 |