DOM 객체에 동적으로 이벤트 핸들러 추가하는 방법

개발자 공부 업무 정보/HTTP,FRONT

회님 2019. 1. 15. 12:28

jQuery를 이용해서 동적으로 이벤트 핸들러를 추가하기 위해서 bind(), live(), delegate() 과 같은 함수를 사용할수 있다

가장 기본적인것은 bind() 함수로

<body> <div> Click here </div> </body>

위와 같은 html 문서가 있을때

$('.clickme').bind('click', function() { // Bound handler called. });

이렇게 해서 clickme 클래스를 가진 객체에 대해 onclick 이벤트를 처리할수 있다

하지만 이후에 아래의 코드가 실행되는 상황을 가정해 보자

$('body').append('<div>Another target</div>');

그렇다면 새로 추가되는 div 객체 또한 clickme 클래스인데, 이 클래스의 경우에는 앞서 추가한 onclick 이벤트 핸들러가 등록 되어 있지 않다.

이러한 경우에 “나중에 추가될 객체” 까지 고려해서 bind를 해주는 함수가 live() 이다

live()함수는 위와 같이 bind()의 발전된 버전이며 jquery 버전이 1.3 이상일 경우에 사용이 가능하다

$('.clickme').live('click', function() { // Live handler called. });

이렇게 사용한다면, append() 를 통해 새로운 clickme 클래스 객체 추가된다고 하더라도 onclick 이벤트 핸들러가 작동하게 된다

마지막으로 delegate() 는 조건에 해당하는 모든 객체에 이벤트 핸들러를 연결시킨다

$("table").delegate("td", "hover", function(){ $(this).toggleClass("hover"); });

위와 같이 사용하면, <table> 아래에 있는 모든 <td> 들은 hover 핸들러를 가지게 된다

이것을 live()를 사용해서 구현하면 아래와 같으며, 이 둘은 동일하다

$("table").each(function(){ $("td", this).live("hover", function(){ $(this).toggleClass("hover"); }); });

<c:url value 쓰는 이유 / jsessionId (0)	2019.01.18
[javascript] 웹 브라우저의 현재 URL 가져오기 (0)	2019.01.17
jquery 공백 / 특수문자 체크 (0)	2019.01.13
jsp 띄어쓰기 (0)	2019.01.13
형제 요소들 찾기, siblings (0)	2019.01.12

IT종합 블로그