메뉴 건너뛰기

조회 수 300 댓글 2
<!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>이벤트 객체의 target</title>
  <script>
  window.onmouseover = function(e) {
  if(e.target.tagName.toLowerCase() != "span") return;
  e.target.style.textDecoration ="underline";
  }
  window.onmouseout = function(e) {
  if(e.target.tagName.toLowerCase() != "span") return;
  e.target.style.textDecoration ="none";
  }
  </script>
  </head>
  <body>
  <h3>span 태그에만 onmouseover/onmouseout</h3>
  <hr>
  <p>span 태그에 대해서만 <span>마우스</span>가 올라올 때
  밑줄이 그어지고 <span>마우스</span>가 내려갈 때 밑줄이 사라지도록
  <span>자바스크립트 코드</span>를 작성한다.
  </p>
  </body>
  </html>

 

 

빨간글씨인 if() return; 은 책에서 본적이 없는 내용 같아서요.

조건문만 쓴뒤 실행문없이 리턴을 바로 쓰는것엔 어떤 의미가 있나요?

그리고 소문자 체크를 하는 이유는 문제 밑에 힌트의 내용으로는 태그네임 프로퍼티는 항상 대문자라고 하셨는데

태그네임으로 가져오는 프로퍼티는 자바스크립트에서 항상 대문자로 인식을 하기 때문에

우리가 쓰는 소문자랑 체크를 할려면 tolowercase를 써줘야 한다는 말인가요?

 

원래라면

 

function (e){

if(e.target.tagName.toLowerCase() !== span){

e.target.style.textDecoration="none";

}

}

이런식의 코드 작성으로도 되는건가요?

?
  • ?
    관리자 2018.10.24 10:00
    1. e.target은 책 페이지 397, 예제 9-6, 그리고 표 9-2에 있습니다.
    e.target은 현재 이벤트를 유발시킨 DOM 객체입니다. 말씀한 것과 같이 tagName은 모든 DOM 객체가 가진
    프로퍼티로 항상 대문자이지요(표 8-1 참고)

    2. return을 하는 이유는 window 객체에 onmouseover 리스너를 다는 문제이기 때문입니다.
    span 객체에 onmouseover를 달면 굳이 span인지 비교할 필요가 없겠지만, window 객체의 모든 자식 DOM 객체들 위해 마우스가 올라가면 계속
    mouseover 이벤트가 발생하기 때문에, span 객체를 구분하기 위해 아래의 조건문을 사용합니다.
    if(e.target.tagName.toLowerCase() != "span")

    즉 span 객체가 아니라면 바로 리턴하여 아무일도 하지 않기 위함입니다.

    3. tagName이 항상 대문자로 태그이름을 가지고 있기 때문에 이를 소문자로 바꾸기 위해
    e.target.tagName.toLowerCase()를 사용한 것이고 다음과 같이 비교합니다.
    if(e.target.tagName.toLowerCase() != "span")
    다음과 같이 해도 됩니다.
    if(e.target.tagName != "SPAN")

    4. 다음 코드는 좀 이상한 것 같습니다.
    function (e){
    if(e.target.tagName.toLowerCase() !== span) {
    e.target.style.textDecoration="none";
    }
    }

    !== 연산자는 엄격한 비교를 위한 것인데, "span"으로 해야 합니다. 그리고 "none"으로 한 것은
    onmouseout의 코드로 사용해야하는데...

    이상입니다.
  • ?
    muuum 2018.10.25 07:18
    이해가 쏙쏙 됩니다. 감사합니다!

QnA

공부하면서 궁금했던 것을 질문해보세요.

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.21 18177
322 버튼 태그에 대해서 궁금한게 있습니다!! 1 아이디가뭐였지 2021.03.22 128
321 2장 이론문제 3번 1 알고싶어요 2021.03.14 1328
320 14장 예제 사라진 건가요 1 ... 2021.03.09 4077
319 ch1 이론문제 1번 2 새내기 2021.03.06 217
318 연습문제 짝수답은어디있나요?? 2021.02.16 825
317 9장 실습문제 10번 2 왜죠 ㅠㅠ 2021.01.24 1203
316 명품 html5+ 수정판 css3+ javascript 웹 프로그래밍 실습문제 이미지 파일 어디서 다운 받아요? 1 미카엘 2021.01.14 728
315 p.296 isNaN 함수 1 yamto 2020.12.28 179
314 실습문제 6장 6-(1) 어떻게 하는 건가요? 1 초보자 2020.12.23 215
313 실습문제 7장 5번 1 유등등 2020.12.17 694
312 13-5 하고 13-6 error 1 WebWeb 2020.12.09 148
311 7장 1번 1 2020.11.30 311
310 9장 실습문제 10번 계산기 만들기 2 호탱 2020.11.29 351
309 6장 오픈챌린지 질문 1 giggle 2020.11.23 275
308 Page 396 script 위치 관련 질문 드립니다 2 질문드립니다 2020.11.05 154
307 실습 8장 8번 문제 질문이요! 1 2020.11.03 247
306 chapter5 오픈챌린지 5장 아예 모르겠어요.. 열심히해보자 2020.11.03 292
305 안녕하세요? 186쪽 예제 4-13 대해서 물어봅니다. 1 file 김현우 2020.11.02 125
304 5-3 220page 1 고수가되고싶어요 2020.10.24 141
303 7장 실습문제 10번 좀 도와주세요 ㅜㅠ 헷찡 2020.10.18 233
목록
Board Pagination Prev 1 ... 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로