미새문지

24.06.28 day12 코드트리 문제 풀기, 이벤트 전파(Event Propagation) 본문

개발 TIL

24.06.28 day12 코드트리 문제 풀기, 이벤트 전파(Event Propagation)

문미새 2024. 6. 28. 19:13
728x90

좌우 지그재그 출력

자연수 n이 주어집니다. 1부터 n * n까지 다음 규칙에 따라 출력하는 프로그램을 작성해보세요.

예제1

입력: 3

출력:

1 2 3
6 5 4
7 8 9

예제2

입력: 4

출력:

1 2 3 4
8 7 6 5
9 10 11 12
16 15 14 13

 

n = int(input())
cnt = 1

for i in range(n):
    print(cnt, end=' ')
    cnt += 1
print()

for i in range(n-1):
    if i % 2 == 1:
        cnt += n+1
        for j in range(n):
            print(cnt, end=' ')
            cnt += 1
    else:
        cnt += n-1
        for j in range(n):
            print(cnt, end=' ')
            cnt -= 1
    print()

첫 줄을 제외한 나머지 줄은 지그재그로 출력되기 때문에 첫 줄 먼저 출력해주고 이후의 줄바꿈 때는

왼쪽 이동 시 cnt 값에 n값을 더하고 -1을 해준다.(윗 줄에서 출력하고 +1을 해주기 때문)

오른쪽 이동 시 cnt 값에 n값을 더하고 +1을 해준다.(윗 줄에서 출력하고 -1을 해주기 때문)

구구단 만들기

짝수인 정수 a, b가 주어지면, a이상 b이하의 수 중 짝수에 해당하는 숫자의 구구단을 예제와 같은 형식으로 출력하는 프로그램을 작성해보세요. b에서 a로 감소하며 출력합니다.

 

예제1

입력: 2 6

출력:

6 * 1 = 6 / 4 * 1 = 4 / 2 * 1 = 2
6 * 2 = 12 / 4 * 2 = 8 / 2 * 2 = 4
6 * 3 = 18 / 4 * 3 = 12 / 2 * 3 = 6
6 * 4 = 24 / 4 * 4 = 16 / 2 * 4 = 8
6 * 5 = 30 / 4 * 5 = 20 / 2 * 5 = 10
6 * 6 = 36 / 4 * 6 = 24 / 2 * 6 = 12
6 * 7 = 42 / 4 * 7 = 28 / 2 * 7 = 14
6 * 8 = 48 / 4 * 8 = 32 / 2 * 8 = 16
6 * 9 = 54 / 4 * 9 = 36 / 2 * 9 = 18

 

a, b = map(int, input().split())

for i in range(1,10):
    for j in range(b, a-1, -2):
        print(f"{j} * {i} = {j*i}", end=' ')
        if j > a:
            print('/', end =' ')
    print()

한 줄에 b에서 a사이의 짝수의 구구단을 출력해야 하기 때문에 내부 for문에서 -2씩 수치를 감소시켜 출력해준다.

그리고 j가 마지막 짝수보다 클 경우에만 '/' 기호를 출력해서 각 구구단을 구분해준다.

19단 출력

19 * 19 단을 다음 양식에 맞춰 출력하는 코드를 작성해보세요.

1 * 1 = 1 / 1 * 2 = 2 
1 * 3 = 3 / 1 * 4 = 4 
............. 
1 * 17 = 17 / 1 * 18 = 18 
1 * 19 = 19 
2 * 1 = 2 / 2 * 2 = 4 
............. 
19 * 17 = 323 / 19 * 18 = 342 
19 * 19 = 361

 

for i in range(1, 20):
    for j in range(1, 20):
        print(f"{i} * {j} = {i*j}", end=' ')
        
        if j == 19:
            print(' ', end=' ')
        elif j % 2 == 1:
            print('/', end=' ')
        else:
            print(' ', end=' ')


        if j % 2 == 0:
            print()
    print()

한 줄에 구구단이 2개 씩 들어가야 하며 중간에 슬래시를 넣어줘야 했기 때문에 if문으로 j가 홀수 때 마다 슬래시를 넣어주고 만약 홀수 중 19단이 끝나는 19가 나오면 슬래시 대신 공백으로 처리하도록 했다.

이벤트 전파(Event Propagation)

  • 웹 브라우저에서 이벤트가 발생했을 때 해당 이벤트가 DOM(Document Object Model) 트리 내에서 어떻게 전파되는지를 설명하는 개념
  • 이벤트 전파는 크게 세 가지 단계로 캡처링 단계(capturing phase), 타겟 단계(target phase), 버블링 단계(bubbling phase)로 나뉜다.

1. 캡처링 단계 (Capturing Phase)

  • 이벤트가 최상위 요소(보통 window 객체)에서 시작하여 이벤트가 발생한 요소까지 내려가는데, 이 단계에서는 이벤트가 발생한 요소로 가는 경로에 있는 모든 조상 요소들을 거쳐 내려간다.
  • 예를 들어, 문서의 가장 상위(document)에서부터 이벤트가 발생한 요소까지 이벤트가 전파된다.

2. 타겟 단계 (Target Phase)

  • 이벤트가 실제로 발생한 요소에서 실행되는데, 이 단계에서는 이벤트 리스너가 이벤트가 발생한 요소에서 실행된다.

 

3. 버블링 단계 (Bubbling Phase)

  • 이벤트가 발생한 요소에서 시작하여 최상위 요소로 올라가는데, 이벤트가 발생한 요소에서부터 그 조상 요소들을 거쳐 최종적으로 window 객체에 도달할 때까지 전파된다.
  • 예를 들어, 이벤트가 발생한 요소의 부모, 조부모 등을 거쳐 최상위 요소까지 이벤트가 전파된다.

 

이벤트 버블링 (Event Bubblig)

  • 이벤트 버블링은 특히 버블링 단계에서 주로 언급되며, 이벤트가 발생한 요소에서 시작하여 상위 요소들로 전파되는 것을 의미한다.
  • 예를 들어, 만약 사용자가 <div> 요소 안의 <button> 요소를 클릭하면, 클릭 이벤트는 다음과 같은 순서로 전파된다.
  1. <button> 요소에서 이벤트가 발생
  2. <button> 요소의 부모인 <div> 요소로 이벤트가 전파
  3. <div> 요소의 부모로 이벤트가 전파되며, 이렇게 계속해서 상위 요소로 전파
  4. 최종적으로 document 객체와 window 객체에 도달

 

이벤트 리스너(Event Listener)

이벤트 리스너는 이벤트 전파 과정의 각 단계에서 이벤트를 처리할 수 있으며, 이벤트 리스너는 두 가지 방식으로 등록될 수 있다.

  • 캡처링 단계에서 등록: addEventListener 메서드의 세 번째 인자로 true를 전달하면 이벤트가 캡처링 단계에서 처리된다.
element.addEventListener('click', handler, true);
  • 버블링 단계에서 등록: 기본적으로 이벤트 리스너는 버블링 단계에서 등록되며, addEventListener 메서드의 세 번째 인자를 생략하거나 false를 전달하면 된다
element.addEventListener('click', handler, false);

 

예제)

<!DOCTYPE html>
<html>
<body>

<div id="parent" style="border: 1px solid black; padding: 20px;">
  Parent
  <button id="child">Child</button>
</div>

<script>
  document.getElementById('parent').addEventListener('click', function() {
    alert('Parent clicked');
  });

  document.getElementById('child').addEventListener('click', function(event) {
    alert('Child clicked');
    event.stopPropagation(); // 이 코드가 없으면 이벤트는 부모 요소로 전파됩니다.
  });
</script>

</body>
</html>

위 예제에서, 만약 사용자가 "Child" 버튼을 클릭하면, "Child clicked" 그리고 "Parent clicked" 두 개의 알림이 나타난다.

하지만, event.stopPropagation() 메소드를 사용하면 이벤트 전파가 중단되어 "Parent clicked" 알림은 나타나지 않게 된다.

728x90
저작자표시 비영리 변경금지

'개발 TIL' 카테고리의 다른 글

24.06.30 day14 코드트리 문제 풀기  (0) 2024.06.30
24.06.29 day13 코드트리 문제 풀기, 프로그래머스 문제 풀기  (0) 2024.06.29
24.06.27 day11 코드트리 문제 풀기, 리액트의 라이프 사이클  (0) 2024.06.27
24.06.26 day10 코드트리 문제 풀기, require와 import의 차이점  (0) 2024.06.26
24.06.25 day9 코드트리 문제 풀기, falsy values  (0) 2024.06.25
'개발 TIL' Related Articles more