| <!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";
}
}
이런식의 코드 작성으로도 되는건가요?
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의 코드로 사용해야하는데...
이상입니다.