이벤트 버블링 : 하위태그에서 상위태그로 순차적으로 같인 이벤트가 실행됨
이벤트 캡쳐링 : 이벤트 버블링과 반대되는 개념이다. 상위태그에서 하위 태그 순으로 같은 이벤트가 실행된다.
표준 이벤트 모델 : addEventListenr(이벤트속성, handler, capture사용여부)
: onclick 이벤트속성은 'click'만 쓰면 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
/*
DOM level 2
표준 이벤트모델 : addEventListener(이벤트속성,handler, capturing 사용여부)
*/
window.onload = function(){
let btn = document.getElementById('btn')
btn.addEventListener('click', function(){ //onclick 인데, on을 생략하고 click이라고 쓰면 된다.
alert('button click...')
}, true) // true일 경우 : 이벤트 캡쳐링이 발생한다. / false일 경우 : 이벤트 버블링 발생
let span = document.querySelector('span')
span.addEventListener('click', function(){
alert('span click...')
})
}
</script>
</head>
<body>
<button id ='btn'><span>CLICK</span></button>
</body>
</html>
'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
| [JS] DOM : form 태그 응용, 조건에 따른 submit 활용(onsubmit) (0) | 2020.06.22 |
|---|---|
| [JS] DOM : form 태그(document.name속성명), checkbox 버튼 전체선택, 전체취소, 결과보기 (1) | 2020.06.22 |
| [JS] DOM level 0 : 고전 이벤트 모델 vs 인라인 이벤트 모델 (0) | 2020.06.22 |
| [JS] 태그 가져오기(2) document.querySelector(), querySelectorAll() (0) | 2020.06.22 |
| [JS] 버튼을 누를 때마다 동적으로 변하는 페이지 만들기(숫자 증감) (0) | 2020.06.21 |
