이벤트 버블링
이벤트를 실행하면, 상위에 있는 같은 이벤트를 순차적으로 실행함
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
window.onload = function() {
// 이벤트 버블링 : (onlclick) 이벤트를 실행하면, 상위에 같은 이벤트를 모두 실행시킴
var span = document.querySelector('span')
var h1 = document.querySelector('h1')
var div = document.querySelector('div')
span.onclick = function() {
alert('click span...')
}
h1.onclick = function() {
alert('click h1...')
}
div.onclick = function() {
alert('click div...')
}
}
</script>
</head>
<body>
<div>
<h1>
<span>Hello</span>
</h1>
</div>
</body>
</html>
이벤트 버블링 제한하기
클릭했을 때의 이벤트(MouseEvent)를 e로 받는다. 매개변수명은 내 멋대로 정하면 됨.
MouseEvent를 항상 날리고 있었는데, 우리가 사용하지 않은 것 뿐임.
arguments[0] 으로 활용해도 같은 결과를 얻을 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
window.onload = function() {
// 이벤트 버블링 : (onlclick) 이벤트를 실행하면, 상위에 같은 이벤트를 모두 실행시킴
var span = document.querySelector('span')
var h1 = document.querySelector('h1')
var div = document.querySelector('div')
span.onclick = function(e) { // 클릭했을 때의 이벤트를 e로 받는다.
alert('click span...')
console.log(e)
}
h1.onclick = function(e) {
alert('click h1...')
e.cancelBubble = true // 나보다 상위의 같은 이벤트에 가지 맙시다!
}
div.onclick = function(e) {
alert('click div...')
}
}
</script>
</head>
<body>
<div>
<h1>
<span>Hello</span>
</h1>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
window.onload = function() {
// 이벤트 버블링 : (onlclick) 이벤트를 실행하면, 상위에 같은 이벤트를 모두 실행시킴
var span = document.querySelector('span')
var h1 = document.querySelector('h1')
var div = document.querySelector('div')
span.onclick = function() {
// 클릭했을 때의 이벤트(MouseEvent)를 e로 받는다. 매개변수명은 내 멋대로 정하면 됨.
// MouseEvent를 항상 날리고 있었는데, 우리가 사용하지 않은 것 뿐임.
alert('click span...')
console.log(arguments[0])
}
h1.onclick = function() { // 클릭했을 때의 이벤트(MouseEvent)를 e로 받는다.
alert('click h1...')
arguments[0].cancelBubble = true // 나보다 상위의 같은 이벤트에 영향을 미치지 맙시다!
}
/* func()
func(1,2,3) */
div.onclick = function() { // 클릭했을 때의 이벤트(MouseEvent)를 e로 받는다.
alert('click div...')
}
}
</script>
</head>
<body>
<div>
<h1>
<span>Hello</span>
</h1>
</div>
</body>
</html>'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
| [JS] 버튼을 누를 때마다 동적으로 변하는 페이지 만들기(계산기) (0) | 2020.06.21 |
|---|---|
| [JS] 작성한 함수가 제대로 작동하지 않는 문제 (원인 : 자스크립트 내에 이미 있는 함수일 경우) (0) | 2020.06.21 |
| [JS] 버튼을 눌렀을 때 alert 하기 (0) | 2020.06.19 |
| [JS] 스크립트에 css 적용하기 (0) | 2020.06.19 |
| [JS] 태그 가져오기(1) getElementById('id') VS getElementByTagName('td') (0) | 2020.06.19 |
