TIL 2022-02-07 JS 이벤트 전달, 폰트 관련

이벤트 캡쳐링, 버블링을 막을때 stopPropagation, preventDefault를 많이 쓴다.

 

 

둘의 차이점으로

stopPropagation는 stop propagtion, 즉 전파를 막는 것이다.

향후 capturing이나 bubbling의 진행을 막아주는 진행되는 것을 막아준다.

 

preventDefault은 prevent default action, 즉 기본적으로 브라우저가 그 이벤트에서 행하는 행동을 막아주는 함수다.

 

 

    <div id="foo">
        <button id="but">button</button>
    </div>
    <script>
        document.getElementById('foo').addEventListener('click', () => { alert('hi') });
        document.getElementById('but').addEventListener('click', (e) => { e.stopPropagation() });
    </script>

라는 코드에서 button을 클릭할떄 stopPropagation때문에 부모의 click 이벤트 핸들러는 작동하지 않는 반면

 

    <div id="foo">
        <button id="but">button</button>
    </div>
    <script>
        document.getElementById('foo').addEventListener('click', () => { alert('hi') });
        document.getElementById('but').addEventListener('click', (e) => { e.preventDefault() });
    </script>

preventDefault는 브라우저의 기본 액션만 막아주기 떄문에 정상적으로 부모 요소에 이벤트가 발생한다.

 

대표적으로 행하는 브라우저 기본 액션으로는 a태그 클릭시 href로 링크 이동, submit 태그 클릭시 새로 고침 등이 있다.

 

stopPropagation 같은 경우 해당 리스너가 부모 요소로 버블링되는 것은 막아주지만 그 특정 행동에 대한 다른 리스너가 트리거되는 것은 막아주지 못한다. 이를 막아주는 것은

 

event.stopImmediatePropagation()

다.

 

캡쳐링 단계에서 이벤트를 잡아내려면 addEventListener의 capture option을 사용하면 된다.

 

elem.addEventListener(..., {capture: true})
// or, just "true" is an alias to {capture: true}
elem.addEventListener(..., true)

이런 식으로 capture 옵션을 true로 하여 캡쳐링하는 이벤트에 대하여 트리거할수 있다.

 

 

한영 다른 폰트

@font-face의 unicode range를 사용하면 된다.

1. 특수문자 범위: U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E
2. 영문 범위: U+0041-005A(대문자), U+0061-007A(소문자)
3. 숫자 범위: U+0030-0039

전체 U+0020-007E

유니코드의 범위는 대충 이렇고,

 

@font-face {
  font-family: "Sans";
  src: url("A.woff") format("woff");
  font-style: normal;
}

@font-face {
  font-family: "Sans";
  src: url("B.woff") format("woff");
  unicode-range: U+0030-0039;
  font-style: normal;
}

위와 같이 전체적으로는 A폰트로 하고 특정 유니코드 범위에 대해서 B를 사용하는 것으로 덮어쓰는 방식으로 유니코드 종류에 따라 다른 폰트를 사용할 수 있다!

 

https://feel5ny.github.io/2019/09/08/CSS_02/

한글은 노토산스, 영문/숫자는 다른 폰트로 해주세요...👀 (feat. unicode)

https://jrgraphix.net/research/unicode_blocks.php

Unicode Character Ranges