https://ko.javascript.info/bubbling-and-capturing
버블링과 캡처링
ko.javascript.info
<style>
body * {
margin: 10px;
border: 1px solid blue;
}
</style>
<form>FORM
<div>DIV
<p>P</p>
</div>
</form>
<script>
let text = '';
for (let elem of document.querySelectorAll('*')) {
elem.addEventListener("click", e => {
if (document.querySelectorAll('*')[document.querySelectorAll('*').length - 2].tagName === elem.tagName) {
text += elem.tagName;
console.log(text);
text = '';
} else
text += elem.tagName + ' > ';
}, true)
}
</script>
<style>
body * {
margin: 10px;
border: 1px solid blue;
}
</style>
<form>FORM
<div>DIV
<p>P</p>
</div>
</form>
<script>
for (let elem of document.querySelectorAll('*')) {
elem.addEventListener("click",
function (event) {
console.log(elem.tagName);
text += elem.tagName + ' > ';
}, true)
}
let text = '';
function zero(){
console.log(text);
text = '';
}
</script>자바스크립트로 리스트에 이벤트 다는 방법 ( Event delegation / 이벤트 위임 ) (tistory.com)
자바스크립트로 리스트에 이벤트 다는 방법 ( Event delegation / 이벤트 위임 )
먼저 자바스크립트로 이벤트를 걸기 위해선 어떻게 해야할까? querySelector나 getElementBy를 활용해 이벤트를 걸 대상을 찾고 addEventListener를 활용해 원하는 이벤트를 걸어주면 된다 코드로 보면 아
takeknowledge.tistory.com
https://www.codingfactory.net/12644
CSS / 선택자(Selector)
전체 선택자(Universal Selector) 전체 선택자(Universal Selector)는 모든 HTML 요소를 선택합니다. 별표(*)로 나타냅니다. 예를 들어 다음은 모든 요소의 색을 파란색으로 만듭니다. * { color: blue; } 다른 선택
www.codingfactory.net
이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지 • 캡틴판교 (joshua1988.github.io)
이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지
(기본) 이벤트 버블링, 이벤트 캡처링, 그리고 이벤트 위임까지 이벤트 전달 방식과 관련된 모든 것을 파헤쳐 봅니다.
joshua1988.github.io
HTML DOM Document querySelector() Method (w3schools.com)
HTML DOM Document querySelector() Method
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
HTML DOM Document activeElement Property (w3schools.com)
HTML DOM Document activeElement Property
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll
Element.querySelectorAll() - Web APIs | MDN
The Element method querySelectorAll() returns a static (not live) NodeList representing a list of elements matching the specified group of selectors which are descendants of the element on which the method was called.
developer.mozilla.org