728x90 자바스크립트 이벤트3 [Javascript] 이벤트 버블링 방지 stopImmediatePropagation [자바스크립트 / Javascript] 이벤트 버블링 방지 stopImmediatePropagation stopImmediatePropagation과 비슷한 역할을하는 stopPropagation이 있는데 이들은 비슷하면서도 다른 성격을 가지고 있다 stopPropagation 같은 경우에는 상위 관련 다른 모든 이벤트 버블링 차단 기능을 수행하고 stopImmediatePropagation 같은 경우에는 상위 및 현재 레벨에 걸려있는 관련 이벤트 모두 동작하지 않도록 중단하는 역할을 하는데 하단의 예제를 통해 자세히 알아보도록 하자 기본 형태 //이벤트 상위 전파 중단 event.stopPropagation(); //이벤트 상위, 현재 레벨에 걸린 다른 이벤트 또한 동작 중단 event.stopImme.. 2021. 5. 25. [Javascript] 이벤트 전파 방지 stopPropagation() 자바스크립트 부모로의 이벤트 전파 방지 Event.stopPropagation(); 간단 설명 ↓ 자바스크립트에서 자식 엘리먼트에서 이벤트 발생시, 부모 엘리먼트에 같은 이벤트가 설정되어있다면, 해당 이벤트에 할당된 기능도 함께 실행된다. 이는 이벤트 전파 현상으로 인한 건데, 상단의 그림과 같이 이벤트가 전파되어진다. 위와 같은 현상을 방지하기 위해서는 Event.stopPropagation()을 사용해야하는데, 아래 예제를 참고하도록 한다. 샘플 예제↓ [Html] [Javascript] let secElem = document.querySelector('#section-sample'); let divElem = document.querySelector('#div-sample'); let btn = .. 2021. 2. 3. [Javascript] 이벤트의 추가 addEventListener() 자바 스크립트에서 이벤트의 추가 AddEventListener EventTarget.addEventListner(이벤트문자열 , 콜백함수); 간단 설명 ↓ 자바스크립트에서 이벤트의 추가 방법에는 여러가지가 있다. 사실 어떤 방법이 가장 좋다라는 정답은 없지만, 향후 유지보수 까지 생각한다면, 가독성이 좋고 같은 요소에 같은 여러개의 이벤트 등록이 가능한 addEventListener()의 사용을 권장한다. 이벤트는 상당히 많으나 하단의 예제에서는 쉬운 예를 위해 'Click' 이벤트로 작성해 보았다. 샘플 예제 ↓ [Html] [Javascript] let examBtn = document.querySelector('#exam-btn'); //클릭 이벤트 추가! addEventListener(이벤트명,콜.. 2021. 2. 2. 이전 1 다음 728x90
