브라우저기본동작

Posted on In

브라우저 기본 동작

상당수 이벤트는 브라우저에서 기본적인 동작이 정해져 있음.


브라우저 기본 동작 막기

기본 동작 막기

  1. event.preventDefault()
  2. on<event> 라면 return false 
1
2
3
<a href="/" onclick="return false">이곳</a>
이나
<a href="/" onclick="event.preventDefault()">이곳을</a> 클릭해주세요.

핸들러에서 false를 반환하는 것은 예외 사항.
보통의 경우 return 반환 값은 무시됨.

메뉴 구현하기

1
2
3
4
5
<ul id="menu" class="menu">
  <li><a href="/html">HTML</a></li>
  <li><a href="/javascript">JavaScript</a></li>
  <li><a href="/css">CSS</a></li>
</ul>

button으로 만들지 않은 이유?

button 으로 만들면 마우스 오른쪽 클릭으로 새창 열기 안됨.

검색 엔진은 a 테그를 이용해서 인덱싱함.

기본 동작 막기

1
2
3
4
5
6
7
8
menu.onclick = function(event) {
  if (event.target.nodeName != 'A') return;

  let href = event.target.getAttribute('href');
  alert( href ); // 서버에서 데이터를 읽어오거나, UI를 새로 만든다거나 하는 등의 작업이 여기에 들어갑니다.

  return false; // 브라우저 동작을 취소합니다(URL로 넘어가지 않음).
};

후속 이벤트
이벤트는 보통 순차적으로 발생함. (예를 들어서 moundown 다음에 focus가 발생함. )
그래서 전에 이벤트를 막았다면 후에 일어날 이벤트도 막게 됨.


addEventListener의 ‘passive’ 옵션

passive: true 옵션은 브라우저에게 preventDefault()를 호출하지 않겠다고 알려주는 것임.

스크롤 할때 브라우저는 preventDefault를 호출했는지 확인하면서 호출했으면 스크롤링을 멈추는 방법을 사용한다.

이때 사용자 입장에서는 스크롤할때 화면이 끊켜서 보이게됨.

명시적으로 호출안할거라는 옵션을 줌으로서 이런 현상을 막을 수 있음

firefox나 crome 같은 브라우저는 기본값이 true 임.


event.defaultPrevented

기본 동작을 막을 경우 이 값이 true 이고, 그렇지 않은 경우 false 임.

버블링과 캡처링에서 event.stopPropagation()을 사용하는 것이 않좋다는것을 알았음.

이 속성을 사용해 똑같은 기능을 구현해 봄.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<p>문서 레벨 컨텍스트 메뉴(event.defaultPrevented를 확인함)</p>
<button id="elem">버튼 레벨 컨텍스트 메뉴</button>

<script>
  elem.oncontextmenu = function(event) {
    event.preventDefault();
    alert("버튼 컨텍스트 메뉴");
  };

  document.oncontextmenu = function(event) {
    if (event.defaultPrevented) return;

    event.preventDefault();
    alert("문서 컨텍스트 메뉴");
  };
</script>