jQuery event Handler 메소드 on()

jQuery event Handler 메소드 on() 

 

지금까지 별 의심없이 사용했던 on() 메소드에도 모르고 지나쳤던 부분이 있었네요.

중요한 기능은 아니지만 코드를 한층더 가독성있게 코딩이 가능한 부분입니다.

 

       $(".buttonGroup .closest").on("click", function(){

             $("li.item-a").closest("ul").css("background-color", "red");

       });

       $(".buttonGroup .parent").on("click", function(){

             $("li.item-a").parents("ul").css("background-color", "red");

 

       });

 

예전에는 위처럼 코딩을 했었는데 on() 메소드 인자중의 하나가 selector 를 넘길 수 있습니다. 그래서 위코드가 아래와 같이 

바뀔 수도 있습니다.

 

       $(".buttonGroup").on("click", ".closest", function(){

             $("li.item-a").closest("ul").css("background-color", "red");

       }).on( "click", ".parent", function(){

             $("li.item-a").parents("ul").css("background-color", "red");

 

       });

on() 메소드의 두번째 인자를 보면 이해가 쉬우리라 생각됩니다.