반응형
코어 자바스크립트의 마지막 챕터 클래스는... 왜 ES6에서 클래스 문법이 도입됬는지 뼈저리게 느낄 수 있었던 챕터였다.
ES5에서 프로토타입으로 상속을 구현하는 것 자체가 너무 복잡하고... (주륵)
ES5에서 클래스를 정의하고 상속하는 방법 중에 Object.create() 라는 메소드가 있다.
상속하고자 하는 프로토타입 객체를 매개변수로 넣고, 상속받는 하위 클래스를 만들어내는 장점이 있지만, 하위 클래스의 프로토타입 생성자가 만들어지지 않는 단점이 있다.
따라서, constructor가 해당 하위클래스를 바라보게 하려면, 아래처럼 코드를 추가해주면 된다.
하위클래스.prototype= Object.create(상위클래스.prototype);
하위클래스.prototype.constructor = 하위클래스;
간단하게 공부한 자바스크립트 용어중에 이벤트 버블링이라는 것이 있다.
이벤트 버블링은 버블이 아래에서 올라오는것을 생각해보면, 하위 요소에서 최상위 부모 요소까지 이벤트를 전달하는 과정이라고 한다.
숫자 3을 클릭하자, 아래처럼 콘솔장에 three, two, one 세개가 다 찍히는것을 확인할 수 있다.
아래와 같이 logEvent함수에 event.stopPropagaion()을 추가했다.
그리고 3을 눌렀을때, 콘솔창에는 three만 출력되는 것을 확인했다. 이벤트가 상위 요소인 one까지 전파되지 않았다.
<body>
<div class="one">
1
<div class="two">
2
<div class="three">3</div>
</div>
</div>
<script>
var divs = document.querySelectorAll("div");
console.log(divs);
divs.forEach(function (div) {
div.addEventListener("click", logEvent);
});
function logEvent(event) {
event.stopPropagation();
console.log(event.currentTarget.className);
}
</script>
</body>
출처: https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/
728x90
반응형
'개발일지 > TIL' 카테고리의 다른 글
| [TIL] 210722 오늘 공부는 함수형 프로그래밍 (0) | 2021.07.22 |
|---|---|
| [TIL] 210721 오늘 공부는 실행 컨텍스트 + 호이스팅 + 콜스택 (0) | 2021.07.22 |
| [TIL] 210720 오늘 공부는 ES6의 비구조화 할당(Destructuring Assignment) (0) | 2021.07.21 |
| [TIL] 210719 오늘 공부는 box-model과 flex-model (0) | 2021.07.20 |
| [TIL] 210716 오늘 공부는 이벤트 루프. 자바스크립트 동작 원리 (0) | 2021.07.17 |