AJax 토글형 댓글 링크 버튼 만들기

제목을 어떻게 해야할찌 몰라서.. 일단 [Ajax 토글형 댓글 링크 버튼] 이라고 적고 시작한다. 이게 어떤거냐면,.. Me2day에 있는 댓글(0) 버튼이라고 생각하면 된다. 미투데이에 요 버튼이 좀 재밌는데.. 버튼이라고 하면, 보통 input 태그를 이용한 버튼을 이용하지만.. 요건 링크와 자바스크립트 그리고 CSS 스타일을 적절히 이용한다.

먼저 링크, 링크는 보통 아래처럼 이용한다. [이동링크이름](이동할 주소) 댓글** 여기에 자바 스크립트를 적용해서 이벤트를 걸면,.. 이동 링크 이름 댓글

위에 처럼 쓰는게 보통인데.. 위에 경우엔 보통 링크를 클릭하면 해당 링크로 점프를 띤다. 그러면 당근 버튼 효과를 내지 못한다.. 그래서 아래처럼..

이동 링크 이름 댓글

자바스크립트에 false를 리턴하게 되면, 클라이언트에서 서버로 전송을 하지않고, 클라이언트에서 함수만 실행하고 종료를 하게 된다. 보통 취소 버튼을 구현할때 요걸 많이 쓴다.

그러면 바로 요 이벤트 함수를 통해서 comment 라고 지정해둔 id 태그의 스타일을 변화시키면 된다. //**

기본은 머 저렇게 하면되는데... 기본적으로 Ajax 콜백에 대한 이해가 있으면,.. 어렵지 않게 구현할수 있을것이다..

사실 내가 젤 어려웠떤건,.-- 따옴표 처리문제..ㅜㅜ.. 아무대로 에디터를 한번 따로 만들어봐야겠다..

&#45-------- updated 2012.07--------- 간혹 리피러를 확인해보는데, 이 포스트가 검색에 걸려 읽으시는 분들에게... 이글은 2008년 2월에 작성한 글로써, 매우 전문적인지 않은 글이니... 그냥 그려려니 참고만하세요. :)

윗 글에서 몇가지 정정한다면, 1. 엘리먼트의 return false;

** 이동 링크 이름

여기서 클릭 이벤트에 return false;를 하는 이유는 본래 a태그가 하는 기본 기능을 수행하지 않겠다는 의미입니다. a 태그의 기본 기능은 바로 href로 지정된 url로 이동하는 기능을 말합니다. 따라서 위와 같이 걸면, a 태그의 기본기능을 수행하지 않게 되는 거죠! 이거 a 태그뿐만 아니라 기본 기능이 걸려있는 모든 엘리먼트에 해당하는 내용입니다. href='#' 으로 해시 값을 지정했을때는 새로 고침하지 않고, URL 뒤에 # 해시가 붙게 되는데,.. 이런 해시값이 지저분하다고 느낄때도 return false를 넣어서 처리하곤 합니다.

2. 인라인 이벤트는 가급적 피하세요! 인라인 이벤트라 함은 앞에서 처럼 HTML 마크업에 바로 onclick='어쩌고 저쩌고' 하고 이벤트 핸들러를 할당하는 경우죠. 이거보다는 addEventListener 함수를 이용해 이벤트를 따로 등록하는 것이 좋습니다. 왜 이게 좋냐면,..

마크업이 깨끗해집니다.
같은 이벤트에 여러 핸들러를 중복해서 추가 할수있습니다. (인라인은 덮어버리죠!)
인라인 핸들러가 정의되지 않는 시점(마크업이 그려지고 있는 시점)에 클릭하면 에러가 날수있습니다.

따라서 되도록이면 모든 마크업이 다 그려지고 나서 자바스크립트를 한번에 로드하고 처리하세요!