안녕하세요. 이번에는 프로그래밍 관련 게시글을 하나 적어볼까 합니다. 아래 문제는 아주 오래전에 겪어봐서 알아두었던 건데 최근에 깜빡하고 다시 똑같은 실수를 범해서 그냥 다시 한번 참고차 남겨두려는 의미에서 포스팅을 해봅니다.
A 태그로 javascript function 을 호출하는 방법은 2가지가 있습니다.
<a href="javascript:callFunction();">javascript function</a>
<a href="javascript:void(0);" onclick="callFunction();">onclick function</a>
물론 위 처럼 그대로 다 적어두지 않고 bind 로 click 이벤트를 주도록 하는 등의 코딩이 가능 하겠지만 일반적으로는 위 처럼 쓰일 것입니다. 이렇게 A 태그에서 함수 호출 시 href 로 사용하는 방법과 onclick 을 사용하는 방법이 있는데 만약 href 로 사용 시 자기 자신을 지칭하는 this 가 전달되지 않습니다.
아래 코드를 보며 확인해 보도록 하겠습니다.
function callFunction(obj) {
console.log($(obj).attr('attr-'a'));
}
<a href="javascript:callFunction(this);" attr-a="onclick : attr-a">javascript function</a>
<a href="javascript:void(0);" onclick="callFunction(this);" attr-a="onclick : attr-a">onclick function</a>
결과 :
javascript function -> undefined
onclick function -> onclick : attr-a
위 처럼 href 로 함수 호출 시 자기 자신의 object 를 찾지 못해 undefined 를 표시하게됩니다. 하지만 onclick 을 사용하면 정상적으로 자기 자신 this 가 인식되어 attr-a 를 표시하게 됩니다.
결론 : 앵커태그에서 함수 호출 시 자기 자신 객체를 전달 시에는 href 가 아닌 onclick 을 사용하면 될 것 같습니다.
-- 추가적인 내용
A 태그에서 <a href="javascript:callFunction();">click</a> 와 같이 쓰는 방법은 javascript pseudo protocol 등의 이름으로 불리우는데 하이퍼링크(href) 에서 자바스크립트를 호출하기 위해 만들어 진 것이라고 합니다. 이와 같은 사용법은 해당 pseudo protocol 방식을 지원하는 브라우저에서만 지원하며 만약 javascript 의 기능을 off 시에는 동작하지 않는다고 합니다. (현재 대부분의 브라우저에서는 사용이 가능하다죠?)
하지만 페이지 이동을 위해서 만들어진 A 태그에서 어쩔 수 없이 함수를 호출해야 하는 경우는 빈번 하실 겁니다. 아래 2가지 예제에 대한 문제를 확인해 보고 해결 방법에 대해 설명해 보도록 하겠습니다.
---------------------------------------------------------------------------------------------
예제 1. 이벤트 버블링
<a href="#" onclick="callFunction();">call function</a>
문제점 :
위와 같이 onclick 으로 함수호출 시 함수 호출 후 이벤트 버블링으로 인해 anchor 를 타서 브라우저 상단으로 이동해 버리는 문제가 있습니다.
해결방법 :
피연산자를 실행하되 피연산자에서 처리된 값을 무시하고 무조건 undefined 를 return 하게 해주는 void 함수를 사용하여 코딩을 할 수가 있다.
<a href="javascript:void(0);" onclick="callFunction();">call function</a>
하지만 이 방법의 경우 특정 브라우저에서 페이지 이동이 되지 않는 문제가 야기된다고 하므로 이와 같이 사용하도록 해야 합니다. (검색 결과 IE6 에서 그렇다고 하네요. 그 이후부터는 정상동작 한다고 합니다.)
<a href="javascript:void(0);" onclick="callFunction(); return false;">call function</a>
또는
<a href="#" onclick="callFunction(); return false;">call function</a>
이렇게 onclick 이벤트에 return false; 를 추가하게 되면 javascript:# , javascript:void(0); 어떠한 것을 사용해도 상관 없다고 합니다.
---------------------------------------------------------------------------------------------
예제 2. pseudo protocol 사용 함수에 return 처리 시
function callFunction() {
console.log('call function');
return true;
}
<a href="javascript:callFunction();">call function</a>
문제점 :
익스프롤러와 파이어폭스의 경우 Anchor 태그에 의해 실행된 자바스크립트 함수가 undefined 이외의 값을 리턴하게 되면 url 로 간주하여 페이지를 이동시켜버립니다.
해결 :
자바스크립트 함수는 브레이스({}) 혹은 return; 을 만났을 때는 아무것도 return 하지 않게 하는 undefined 를 리턴합니다.
그러므로 함수를
function callFunction() {
console.log('call function');
}
와 같이 변경하여 사용하시거나 또는
<a href="javascript:callFunction();" onclick="return false;">call function</a>
처럼 사용해도 해결 가능 할 것입니다.
