JQuery를 이용하여 html 태그(a 태그)의 onclick 이벤트를 동적으로 변경하기

종종 a tag (anchor tag라고도 하죠) 에 href 가 아닌 onclick 이벤트를 쓰기도 합니다.

개발을 하다보면 a tag의 onclick 이벤트를 javascript를 통해서 설정해주어야 하는 경우도 생깁니다.

 

참고로 어떠한 마우스 클릭 동작으로 인해 특정 동작을 수행하는 것을 처리하기 위해서 a 태그 뿐만 아니라 span, div 등 대부분의 태그에 onclick 이벤트를 주어 구현할 수 있습니다. (여기서는 a 태그를 사용하도록 하겠습니다.)

 

일반적으로 아래와 같은 형태로 a 태그를 많이 사용합니다.

<!-- 오즈의 개발자 블로그로 이동! -->

<a id="anchor_test" href="http://ozit.tistory.com">클릭</a>

 

<!-- 오즈의 개발자 블로그로 이동하는데, '안녕'이라는 메시지창도 띄움. -->

<a id="anchor_test2" href="http://ozit.tistory.com" onclick="javascript:alert('안녕');return false;" >클릭</a>

 

 

정적인 페이지인 경우, 위와 같은 형태로 그대로 쓰면 문제 없지만, 종종 onclick 이벤트 발생 시, 실행하는 메시지 내용을 변경하거나 다른 javascript 함수를 호출하도록 바꾸고 싶을 수도 있습니다. 이를 JQuery를 통해서 동적으로 변경할 수도 있습니다.

 

 

<!-- javascript 코드로 변경하는 방법 -->

$(document).ready(function() {

    var obj_anchor = document.getElementById('anchor_test2');

    obj_anchor.onclick = function() { alert('안녕하세요'); }

});

 

또는

 

$(document).ready(function() {

    var obj_anchor = document.getElementById('anchor_test2');

    obj_anchor.onclick = AlertTest;

});

 

AleterTest = function() {

    alert('안녕하세요');

}

 

 

<!-- JQuery 코드로 변경하는 방법 -->

$(document).ready(function() {

    var js_func = "alert('안녕하세요'); return false;";

    var clickEvent = new Function(js_func);

    $("#anchor_test2').attr('onclick', '').click(clickEvent);

});

 

JQuery를 사용하게 되면 태그 기본 onclick 속성을 사용할 수 없기 때문에 JQuery에서 제공하는 click 메쏘드를 사용하여 이벤트를 변경해야 합니다.

 

바로 위 JQuery 코드에서 function 만드는 것은 사용자에 따라서 다른 방식으로 만들어도 상관없습니다.^^ click 메쏘드의 인자로 객체 타입이 function인 것만 오면 됩니다.