본문 바로가기
Hot Tech Reference/Jquery

이벤트와 jQuery trigger

by 알 수 없는 사용자 2013. 11. 30.
반응형




안녕하세요 친환경입니다. 끨끨


자바스크립트에서 이벤트는 아주 중요한 역할을 하는데요, 이 이벤트를 사용자가 새롭게 추가하여 다룰수도 있습니다.
but, 현재 지원하는 이벤트로도 충분한데 왜 이런 부수적인 이벤트를 더 추가할까? 라는 생각이 들지 모르나,

필요합니다 ㅇㅇ;;


우선 샘플코드를 보여드립니다.


<html>

<head>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

</head>

<body>

<button id="btn">사용자 정의 이벤트 발생</button>

</body>


<script>

$("#btn").click(function(){

$(this).trigger("lejewkEvent");

});


$("#btn").on("lejewkEvent",function(){

    alert("!!");

$(this).text("lejewkEvent가 발생됨!");

});

</script>

</html>


jQuery의 trigger 함수를 통해 엘리먼트에 이벤트를 발생시킬수 있습니다. 이벤트이름은 파라미터로 전달하는 문자열이 되겠구요,

이 이벤트를 캐치할때 on을 통해 늘 사용하던것처럼 이벤트명을 적어주시면 되겠습니다.



간단하죠? 그치만 클릭시 구지 저렇게 빙돌려서  처리해야할 필요가 있을까? 라고 느끼실겁니다.

네 있습니다. (물론 샘플코드에선 전혀 그렇게 하지않는게 정상이지만, 좀더 복잡하고 사연깊은 상황에서는 분명 필요할겁니다.)


왜 필요한지는 서로 전혀 연관성없는 엘리먼트간의 변화에 대해서 어떻게 처리할것인가를 우선 생각해보시면 되겠습니다.

함수하나로 퉁칠것인가, 디버깅차원에서 한곳에 몰아넣었으니 일단 보기좋겠죠?? 이건 아닙니다. 디버깅능력을 올리시는게 더 좋을겁니다. 

각 엘리먼트별로 수행하는 함수를 분리해서 플로우를 태워도 나쁘지 않습니다. 그치만 예외처리가 필요한경우 플로우에는 다량의 if문이 추가될것입니다.

방법이야 다양하겠지만 js만큼 이벤트를 쉽고 편하게 다루는 언어도 없을겁니다. 엘리먼트별로 이벤트를 추가하고, 해당 이벤트에 대해서 정의하는게 가장 깔끔하고 일관적인 코드가 될것입니다.




이벤트는 웹 어플리케이션을 개발하는데 있어서는 아주 핵심적인 기능이 될것입니다. 기본만 갖고는 한계가 있을테니 jQuery trigger정도 알아두는것도 나쁘지않으며, 개발 설계에서도 이벤트가 있다는것을 생각하고 한번더 설계하는편이 좋겠습니다.