이벤트 버블링

아래 코드의 이벤트는 div에 할당되어 있지만, em이나 code 같은 자식 태그를 클릭해도 동작합니다.

  <div onclick="console.log('click div');">
    <em><code>EM</code></em>을 클릭했는데도, <code>div</code>에 할당된 핸들러가 동작합니다.</em>
  </div>

버블링

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다.
가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다.

3개의 요소가 FORM > DIV > P 형태로 중첩된 구조에 각각 핸들러가 할당되어 있습니다.

  <form onclick="console.log('click form')">
    FORM
    <div onclick="console.log('click div')">
      DIV
      <br/>
      <p onclick="console.log(p)">P</p>
    </div>
  </form>

가장 안쪽의 p를 클릭하면 순서대로 다음과 같은 일이 벌어집니다.

  1. p에 할당된 onclick 핸들러 동작.
  2. div에 할당된 onclick 핸들러 동작.
  3. form에 할당된 onclick 핸들러 동작.
  4. document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러 동작.

이런 동작 방식 때문에 p 요소를 클릭하면 p -> div -> form 순서로 3개의 콘솔 로그가 출력되는 것이조.
이런 흐름을 '이벤트 버블링'이라고 부릅니다.
이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 형세 입니다.

거의 모든 이벤트는 버블링 됩니다.
focus와 같이 버블링 되지 않는 이벤트도 있습니다.

event.target

부모 요소의 핸들러는 이벤트가 정확히 어디서 발생했는지 등에 대한 자세한 정보를 얻을 수 있습니다.
이벤트가 발생한 가장 안쪽의 요소는 타깃(target) 요소라고 불리고, event.target을 사용해 접근할 수 있습니다.
event.target과 this (event.currentTarget)은 다음과 같은 차이가 있습니다.

  • event.target은 실제 이벤트가 시작된 '타켓'요소 입니다. 버블링이 진행되어도 변하지 않습니다.
  • this 는 현재 요소로, 현재 실행중인 핸들러가 할당된 요소를 참조합니다.

버블링 중단하기

이벤트 버블링은 타깃 이벤트에서 시작해서 html 요소를 거쳐 document 객체를 만날 때까지 각 노드에서 모두 발생합니다.
몇몇 이벤트는 window 객체까지 거슬러 올라가기도 합니다. 이 때도 모든 핸들러가 호출됩니다.

핸들러에게 이벤트를 완전히 처리하고 난 후 버블링을 중단하도록 할 수 있습니다.
event.stopPropagation()을 사용하면됩니다.

event.stopImmediatePropagation()

한 요소의 특정 이벤트를 처리하는 핸들러가 여러개인 상황에서, 핸들러 중 하나가 버블링을 멈추더라도 나머지 핸들러는 여전히 동작합니다.
event.stopPropagation()은 위쪽으로 일어나는 버블링은 막아주지만, 다른 핸들러들이 동작하는 건 막지 못합니다.
버블링을 멈추고, 요소에 할당된 다른 핸들러의 동작도 막으려면 event.stopImmediatePropagation()을 사용해야 합니다. 이 메소드를 사용하면 요소에 할당된 특정 이벤트를 처리하는 핸들러들이 모두 동작하지 않습니다.

꼭 필요한 경우를 제외하곤 버블링을 막지 마세요

버블링은 유용합니다. 버블링을 꼭 멈춰야 하는 명백한 상황이 아니면 버블링을 막지 마세요. 아키텍쳐를 잘 고려해서 진짜 막아야 하는 상황에서만 버블링을 막으세요.
event.stopPropagation()은 추후에 문제가 될 수 있는 상황을 만들어 낼 수 있습니다.

  • 예시 시나리오
    1. 중쳡 메뉴를 만들었다 가정합니다. 각 서브메뉴에 해당하는 요소에서 클릭이벤트를 처리하도록 하고, 상위 메뉴의 클릭 이벤트 핸들러는 동작하지 않도록 stopPropagation을 적용합니다.
    2. 사람들이 페이지에서 어디를 클릭했는지 등의 행동 패턴을 분석하기 위해, window내에서 발생하는 클릭 이벤트 전부를 감지하기로 결정합니다. 일부 분석 시스템은 그렇게 분석합니다. 이런 분석 시스템의 코드는 클릭이벤트를 감지하기 위해 document.addEventListener('click', ...)을 사용합니다.
    3. stopPropagation으로 버블링을 막아놓은 영역에선 분석 시스템의 코드가 동작하지 않기 때문에 분석이 제대로 되지 않습니다. 안타깝게도 stopPropagation을 사용한 영역은 죽은 영역(dead zone)이 되어버립니다.

이벤트 버블링을 막아야 하는 경우는 거의 없습니다.
버블링을 막아야 해결 되는 문제라면 커스텀 이벤트 등을 사용해 문제를 해결할 수 있습니다.
핸들러의 event 객체에 데이터를 저장해 다른 핸들러에서 읽을 수 있게 하면, 아래쪽에서 무슨 일이 일어나는지를 부모 요소의 핸들러에게 전달할 수 있으므로, 이 방법으로도 이벤트 버블링을 통제할 수 있습니다.

 

참고 : https://ko.javascript.info/bubbling-and-capturing

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

'WEB > CLIENT_SIDE' 카테고리의 다른 글

[성능 측정] Google Lighthouse  (0) 2024.04.01
Webpack과 Babel 그리고 Polyfill  (0) 2020.11.30

HTML form의 입력값 JSON 객체로 변환시키기

    const formToJSON = (elements) => [].reduce.call(elements, (data, element) => {
            data[element.name] = element.value;
            return data;
        },
        {}
    );

    let form = formToJSON(document.querySelector('#event01Form'))
    console.log(form, '\n', JSON.stringify(form));
728x90
반응형
저작자표시 비영리 변경금지

'Language > JavaScript' 카테고리의 다른 글

[JS] 페이지 리로드  (0) 2021.06.07
[JavaScript] url을 a 태그로 변환하기  (0) 2021.01.06
windows 10 NVM 과 nodejs 설치하기  (0) 2020.12.09
[JS] 날짜 비교  (0) 2020.11.11
[Modern JS] 동기 처리를 위한 Async Await  (0) 2020.06.14

페이지 리로드 하는 방법이 필요해서 찾아보다 기록할 할 필요성있는 문제인거 같아서 남겨본다.

일반적인 js로 페이지 리로드 하기

일반적인 html을 리로드 할 때는 location.reload(); 하나면 된다.

frameset reload 하기

삽질은 여기서 시작 됬다.

    <!DOCTYPE HTML>
    <html>
      <head>생략</head>
      <body>
        <frameset>
            <frame name="top" src="~~"/>
            <frame name="sidebar" src="~~"/>
              <frame name="content" src="~~"/>
              <frame name="footer" src="~~"/>
        </frameset>
      </body>
    </html>

frameset 으로 된 페이지의 리로드는 location.reload()로는 가능하지 않다.
각각의 프레임당 location이 다르기 때문.
사실 이 명령도 DOM 구조를 파악하면 쉬운 문제인데, parent.frames.location.reload(); 명령이면 모든 프레임이 리로드 된다.

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

'Language > JavaScript' 카테고리의 다른 글

[javascript] HTML form to JSON object  (0) 2022.08.08
[JavaScript] url을 a 태그로 변환하기  (0) 2021.01.06
windows 10 NVM 과 nodejs 설치하기  (0) 2020.12.09
[JS] 날짜 비교  (0) 2020.11.11
[Modern JS] 동기 처리를 위한 Async Await  (0) 2020.06.14

화면을 수정했는데, 클라이언트의 브라우져에 캐시가 남아서 이전 화면이 나오는 경우가 있다.
직접 브라우져 설정 들어가서 캐시를 지워달라고 요청 할 수도 있지만, 그게 한두번이 아니게 되니 코드에서 캐시를 지울수 없는지 찾아보았다.
이럴수가...
크게 어렵지도 않지만, html한정으로 이게 꼭 필요한 화면이 아니면 아래 설정은 가급적 안 하는게 좋을 것 같다.

 

HTML 메타태그 이용하기

    <!-- 1990년 이후 이 페이지의 캐시를 만료시킴. -->
    <meta http-equiv="Expires" content="Mon, 06 Jan 1990 00:00:01 GMT" />

    <!-- 캐시를 바로 만료시킴. -->
    <meta http-equiv="Expires" content="-1" />

    <!-- 페이지 로드시마다 페이지를 캐싱하지 않음. (HTTP 1.0) -->
    <meta http-equiv="Pragma" content="no-cache" />

    <!-- 페이지 로드시마다 페이지를 캐싱하지 않음. (HTTP 1.1) -->
    <meta http-equiv="Cache-Control" content="no-cache" />

 

JSP, Java 사용시

자바 코드 지만 html과 같음.

    response.setHeader( "Pragma", "no-cache" );
    response.setDateHeader( "Expires", -1 );
    response.setHeader( "Cache-Control", "no-cache" );

 

JS, CSS 파일 캐시 사용 방지

js나 css등 정적파일도 종종 변경을 해도 캐시문제로 적용이 되지 않는 경우가 많다.
그럴 경우 파일의 url 뒤에 ?timestamp 형태를 넣어준다.

  <link rel="stylesheet" href="/css/common.css?20210512" />
  <script type="text/javascript" src="/js/common.js?20210512"></script>

 

 

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

'WEB > JSP, JSTL' 카테고리의 다른 글

[JSP, JSTL] fn function 정리 - 2  (0) 2020.12.11
[JSP, JSTL] fn function 정리  (0) 2020.11.30
[JSP, JSTL] forEach 잘 사용하기  (0) 2020.11.30

아래 정규표현식은 html 태그를 제거하기 위한 식으로 모든 태그를 제거함.
html 태그가 포함된 src라는 문자열에서 <tag></tag>를 '' 빈 문자열로 치환해 줌.

  const extractTextPattern = /(<([^>]+)>)/gi;

 

모든 태그 제거하기

  <div id="target">
    <h1>This Content is target</h1>
    <span>to replace</span>
    .
  </div>

아래 코드로 위의 #target 엘리먼트를 innerHTML을 통해 하위 모든 문자열을 불러온 후 담은 태그들을 제거할 것임.

  let target = document.getElementById('target');

  let src = target.innerHTML;
  console.log( src );
  /**
   * ->
   * <h1>This Content is target</h1>
   * <span>to replace</span>
   * .
   */
  let extractedText = src.replace(extractTextPattern, '');
  console.log( extractedText );
  /**
   * ->
   * This Content is target
   * to replace
   * .
   */

모든 태그 요소가 제거되어 안의 텍스트만 꺼낼 수 있음.

 

원하는 태그만 제거하는 방법

모든 태그가 아닌 내가 원하는 태그만 선택하여 제거하는 방법도 있음.
h1 태그만 없애고 싶다면, 다음 패턴을 사용하면 됨.

  const extractSpanPattern = /<(\/h1|h1)([^>]*)>/gi;

  let eraseSpan = src.replace(extractSpanPattern, '');
  console.log( eraseSpan );
  /**
   * ->
   * This Content is target
   * <span>to replace</span>
   * .
   */

 

script 태그와 javascript 소스까지 제거하는 패턴

종종 script 태그와 js 소스까지 지워야 하는 경우도 있음.
이럴 경우에는 패턴을 다음과 같이 사용하면 됨.

  const jsPttrn = /<script[^>]*>((\n|\r|.)*?)<\/script>/gim;

참고로 css 태그와 css 소스까지 지우고 싶다면,

  const cssPttrn = /<style[^>]*>((\n|\r|.)*?)<\/style>/gim;

 

플래그를 사용한 정규표현식 고급 사용법

정규 표현식은 여섯 개의 옵션이 있음. 이를 통해 전역 검색 또는 대소문자 구분 없는 검색등을 할 수 있음.

options description
g 전역검색. 종종 g 옵션을 몰라서 replaceAll이라는 함수를 새로 만들어 사용한 코드도 있음.
i 대소문자 구분 없는 검색
m 다중행 (multiline) 검색
s . 에 개항 문자 매칭 (ES2018)
u 패턴을 유니코드 코드 포인트의 나열로 취급합.
y 'sticky' 검색 수횅. 문자열의 현재 위치부터 검색을 수행함.
728x90
반응형
저작자표시 비영리 변경금지

Destructuring Assignment

구조 분해 할당, 또는 비구조화 할당.
배열이나 객체의 속성을 해체하여 그 값을 개별 변수로 담을수 있게 하는 표현식.

객체 비구조화 할당

01.js

  const batMan = {
    name: '브루스 웨인',
    actor: '크리스챤 베일',
    alias: '배트맨'
  };

  const catWoman = {
    name: '셀리나 카일',
    actor: '앤 헤서웨이',
    alias: '켓 우먼'
  };

  function print(hero) {
    const { alias, name, actor } = hero;
    const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
    console.log(text);
  }

  print(batMan);
  print(catWoman);
  const { alias, name, actor } = hero;

이 코드가 객체에서 값들을 추출해서 새로운 변수로 선언해 주는 것.
여기서 파라미터 단에서 객체 비구조화 할당을 하면 더 심플한 코드를 작성할 수 있음.
02.js

  const batMan = {
    name: '브루스 웨인',
    actor: '크리스챤 베일',
    alias: '배트맨'
  };

  const catWoman = {
    name: '셀리나 카일',
    actor: '앤 헤서웨이',
    alias: '켓 우먼'
  };

  function print({ alias, name, actor }) {
    const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
    console.log(text);
  }

  print(batMan);
  print(catWoman);

배열 비구조화 할당.

03.js

  const arr = [1, 2];
  const [one, two, three = 3] = arr;

  console.log( one );
  console.log( two );
  console.log( three );

깊은 비구조화 할당.

  const deepObject = {
    state: {
      information: {
        name: 'jeaha',
        languages: ['javascript', 'java', 'sql']
      }
    },
    value: 5
  };

  const { name, languages } = deepObject.state.information;
  const { value } = deepObject;

  const extracted = {
    name,
    languages,
    value
  };

  console.log(extracted);
728x90
반응형
저작자표시 비영리 변경금지

'Language > JavaScript' 카테고리의 다른 글

[Modern JS] Promise  (0) 2020.06.14
[Modern JS] spread 와 rest  (0) 2020.06.14
[Modern JS] 화살표 함수 (Arrow Function)  (0) 2020.06.05
[Modern JS] Template Literal  (0) 2020.05.29
[Modern JS] keyword ? var : ( let || const )  (0) 2020.05.29

Arrow Function

화살표 함수는 function 키워드 대신 => 를 사용하여 보다 간락한 방법으로 함수를 선언할 수 있다.

Arrow Function의 선언

  // 매개변수 지정 방법
  // 매개변수가 없을 경우
      () => { ... }
  // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
      x => { ... }
  // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.
  (x, y) => { ... }

  // 함수 몸체 지정 방법
  // single line block
  // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다.
  x => { return x * x }
  x => x * x

  //  객체를 반환하는 경우. 소괄호를 사용한다.
  () => { return { a: 1 }; }
  () => ({ a: 1 })

  // multi line block.
  () => {
    const x = 10;
    return x * x;
  };

Arrow Function과 callback

화살표 함수가 기존의 function키워드를 완전히 대신할 수는 없지만, callback 함수에서 사용하면 간결하게 사용 가능하다.

02.js

  const nums = [1, 2, 3, 4, 5,];

  const oddNums = nums.filter(n => n % 2);

  console.log(oddNums);

Arrow Function과 this

Arrow Function은 자신을 포함하는 외부 scope에서 this를 계승 받는다.

  function That() {
    this.name = 'ASDF';

    setTimeout(function () {
      console.log(this.name);
    }, 1000);

    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }

  That();
728x90
반응형
저작자표시 비영리 변경금지

'Language > JavaScript' 카테고리의 다른 글

[Modern JS] spread 와 rest  (0) 2020.06.14
[Modern JS] 구조 분해 할당, 비 구조화 할당 (Destructuring Assignment)  (0) 2020.06.05
[Modern JS] Template Literal  (0) 2020.05.29
[Modern JS] keyword ? var : ( let || const )  (0) 2020.05.29
[Mooodern JavaScript] 모오던 자바스크립트  (0) 2020.05.29

+ Recent posts

티스토리툴바