NULL

이벤트 버블링 어떤 html태그에 이벤트가 발생하면 그 html의 상위요소까지 이벤트가 실행되는 현상을 이벤트 버블링이라고 한다. click이라는 이벤트를 예로 들자면, html 태그에 클릭이 발생하면 그의 모든 상위요소까지 자동으로 클릭이 된다는 뜻이다. hello 위의 코드를 보면 p태그의 hello라는 글자를 클릭하게 되면 브라우저는 사용자가 클릭을 총 3번 했다고 인지한다. 예 ) p위에 div와 그 위의 div 위와 같은 현상이 이벤트 버블링이다. 브라우저는 원래 이렇게 동작하도록 되어있으며 이 사실을 잊은 채 코드를 짜다보면 가끔 이상한 현상이 발생할 수 있다. (← 해당 창을 누르면 모달창 닫으라는 코드를 짬) 모달창 내용 사용자가 이거 클릭해도 이벤트 버블링 때문에 이것도 클릭한 것이 된다..

js. jquery 퍼센트 스크롤 JS window.addEventListener("scroll", function () { var per = ((window.scrollY / (document.body.clientHeight - window.innerHeight)) * 100); box.style.width = per + "%"; console.log(per.toFixed(0) + "%"); }) jquery $(window).on("scroll", function(){ var percent = ($(window).scrollTop() / ($(document).height() - $(window).height())) * 100; $('.box__width').css('width', percent+"%..

스크롤 이벤트리스너 window.addEventListener('scroll', function(){ console.log('123') }); 스크롤바를 조작하면 scroll 이벤트가 발생한다. 그래서 scroll 이벤트리스너를 전체 페이지에 달면 전체 페이지를 스크롤할 때마다 원하는 코드를 실행할 수 있다. 코드를 실행하고 스크롤을 조작하면 할때마다 123이 콘솔에 출력된다. 참고로 window는 그냥 전체 페이지를 의미한다. document도 전체 페이지인데 window가 약간 더 큰 개념이고 scroll 이벤트리스너는 관습적으로 window에 붙인다. 스크롤 관련 유용한 기능들 window.addEventListener('scroll', function(){ console.log( window.sc..