사용자가 <a href="">링크</a> 로 된 링크를 클릭시 이동하고자 하는 URL을 알아내거나 클릭한 페이지로 이동하기전 자신이 원하는 행동을 하고자 할때 다음과 같이 사용자 이벤트 메시지를 잡아 낼 수 있다.
다음 소스는 사용자가 링크를 클릭시 자신이 원하는 곳으로 새창을 띄운뒤 다시 부모창으로 포커스를 이동한다음 원래 클릭해서 이동하고자 한 곳을 보여주는 내용 입니다.
목적은 홈페이지 모든 소스에 클릭시 원하는 곳으로 띄운뒤 새로운 창을 띄워야 하는 기능을 추가할려고 하다 보니 아래와 같이 구현하게 되었음.
이렇게 해서 굳이 사이트 코딩을 일일이 변경 해주지 않아도 원하는 영역에 이벤트 기능을 넣을수 있음.
<html>
<script language="JavaScript">
function linkclick() {
var e = arguments[0] || event;
var target = e.target || e.srcElement;
if(target.tagName.toLowerCase() == "a") { //클릭한 곳이 <a 태그인지 확인
window.open("새창 URL","_blank"); //팝업을 새창으로 띄우기 이외에도 원하는 이벤트처리
window.focus(); //새창이 뜬뒤 포커스를 다시 본창으로 오도록 처리
}
}
</script>
<body onClick="linkclick()">
<a href="a.html">a</a>
<a href="b.html">b</a>
<a href="c.html">c</a>
</body>
</html>
참고: 간혹 포커스가 다시 부모창으로 안돌아올 경우 새창 페이지에도 다음과 같이 추가해주면 확실하게 포커스가 돌아온다.
<html>
<body onLoad="opener.focus()">
</body>
</html>
위 기능을 응용하면 마우스를 스크롤 움직인다던지 특정 <input 박스를 클릭한다던지 어떠한 사용자 액션이라도 감지 하여 원하는 이벤트를 실행할 수 있습니다.
위 와 같은 기능으로 로그를 잡고자 할때에도 유용하게 쓰이겠죠.
페이지중에서 사용자가 어디를 클릭하는지 감지 하고자 할때
if(target.tagName.toLowerCase() == "a") { //클릭한 곳이 <a 태그인지 확인
alert(target);
}
위 소스의 target은 사용자가 클릭한 URL을 담고 있으므로 target정보를 저장할 수 있으니 접속자 패턴을 분석하는데 용이할듯.
아마도 통계 분석해주는 사이트에서 보통 스크립트 한줄 삽입하는데 이와 같은 원리로 로그를 잡는것 같다. ^^
위 글은 세이박스에서 직접 작성한 것으로 퍼가실 경우 반드시 출처와 함께 남기시길 바랍니다.
출처 : 세이박스 http://saybox.tistory.com/468
'웹프로그램' 카테고리의 다른 글
| [JSP] how to upload image using JSP (0) | 2009.01.21 |
|---|---|
| PHP Header 다운로드 에서 파일이름이 한글로 된경우 바로 열기 다운로드 안되는경우 (0) | 2009.01.05 |
| 프록시 proxy 접속자 실제 아이피 ip 확인 가능 (0) | 2008.11.19 |
| ASP 제목이나 글자 길이가 지정한 길이보다 초과하면 잘라 내고 ... 붙이기 (0) | 2008.11.19 |
| 자바스크립트로 클릭 이벤트 강제 발생 시키기 (0) | 2008.11.07 |
| 자바스크립트 select 셀렉트 박스 선택한 값을 받아오기 (0) | 2008.11.07 |
| 자바스크립트 아이프레임 내용 길이에 맞게 리사즈 하기 (0) | 2008.11.07 |
| 자바스크립트 iframe에서 내용에 따라 자동으로 크기 변환하기 (0) | 2008.11.07 |