기본 브라우저 이벤트 혹은 이벤트 전파 방지하기브라우저의 기본 이벤트 혹은 버블링의 현상을 방지하고 싶은 상황이 있습니다. 이를 방지하기 위한 방법도 여러가지 입니다. Show 다만, 상황에 맞는 방법을 사용해야지 추후에 다른 문제점이 발생하지 않을 것 입니다. 브라우저 기본 이벤트부터 알아보고 그에 맞는 동작을 막는 법을 알아봅시다. 기본 동작 막기브러우저의 기본 태그들은 기본 이벤트를 갖고 있는 경우가 많습니다. 예로 이러한 기본 브라우저의 이벤트를 방지하기 위한 방법이 있습니다.
위의 두 가지 방법도 다른 상황에서만 적용 가능하다. 1. event.preventDefault()콜백함수에 2. return false
위의 코드와 같이 작성했을 때 브라우저는 아래와 같이 동작한다고 한다.
그러므로 handleClick에서 반환한 값은 어디에도 사용되지 않기 때문에 동작하지 않는다고한다. 즉 return을 콜백함수에서 사용하고 싶다면, html태그에서 콜백함수를 호출한것을 반환해 주어야한다.
이벤트 전파 방지하기
이벤트 전파를 방지하는 방법은 대표적으로 이벤트 전파를 멈추고 싶은곳에 event.stopPropagation() 예시아래의 코드펜의 2개의 예시를 실행해보고 파악해보자
위의 예시를 보고 이해가 잘되지 않는다면 이벤트 전파 캡쳐링,버블링을 보고 이벤트 전파과정을 다시 이해해보자. event.stopPropagation()의 위험한 점이벤트 전파를 막는 경우는 흔하지 않을 뿐더러 막게 된다면 위의 경우처럼 아래와 같이 작성한다면, a태그 위에서 우클릭을 할 때는 a클릭의 콜백함수만 동작하게 된다.
마무리이벤트에 대해 조금이나마 알아보았는데 DOM Node와 관련된 메소드들도 많이 있는것 같다. 이번에 공부하면서 처음본 참조 : https://ko.javascript.info/bubbling-and-capturing https://ko.javascript.info/default-browser-action |