오늘의 궁금점. 제이쿼리와 자바스크립트를 혼재하여 쓰면 어떤 문제가 있을까?
제이쿼리가 가장 잘하는건 다큐멘트 안에있는 오브젝트(dom)을 잘 찾아간다.
그 외에는 별로 없다. 자바스크립에 quearySelector가 생김으로 사용 빈도가 줄어들고 있다.
원래 제이쿼리는 jQuery(".green")이렇게 적는게 정석인데, $로 줄여서 쓰곤하는것이다.
제이쿼리 호출시에는 제이쿼리 호출 후에 사용해야한다.
dom을 읽어와서 호출해야한다.
그래서 사용하는 방식이 $(document).ready(function(){}) => “dom이 다 로드되고 찾아라”라는 의미를 가지고 있다.
스크립트를 dom로드 후에 호출하고 싶을 때, 위치가 아닌 html코드만으로도 가능한데, ‘defer’가 있다.
<scriptr src=“../js/main/js” defer>
defer 는 js가 dom이 로드된 이후에 실행하도록 해준다.
<script> 태그의 defer 속성은 페이지가 모두 로드된 후에 해당 외부 스크립트가 실행됨을 명시한다.
브라우저가 페이지를 파싱되는 동안에도 스크립트가 실행시키고 싶을때는, async라는 script속성을 사용할 수 있다.
- async 속성이 명시된 경우 : 브라우저가 페이지를 파싱되는 동안에도 스크립트가 실행됨.
- async 속성은 명시되어 있지 않고 defer 속성만 명시된 경우 : 브라우저가 페이지의 파싱을 모두 끝내면 스크립트가 실행됨.
- async 속성과 defer 속성이 모두 명시되어 있지 않은 경우 : 브라우저가 페이지를 파싱하기 전에 스크립트를 가져와 바로 실행시킴.
자바스크립의 경우 이벤트는 아래의 함수로 받아온다.
addEventListener()
mouseenter와 mouseleave가 버블링되는 것을 queue가 쌓여있는 상황이라 할수 있다.
그래서 stop()로 queue가 쌓이지 않고 이전 queue는 삭제되게 해야한다.
함수는 return을 만나면 바로 끝나버린다.
버튼 태그는 링크 이동이 없기에 해당하는 js에 return false를 넣지 않아도 된다.
이러한 네비를 만들 때, 이벤트만 고려할 것이 아니라 링크로만의 이동도 고려해야한다.