<!DOCTYPE html><html lang="ko"><head><meta charset="utf-8"><script src="js/jquery.js"></script></head><body><ul><li><span>이전요소</span></li></ul><button>요소추가버튼</button><script>/*$(선택자).on(이벤트타입 [, 추가선택자(동적이벤트대상요소)] [, 이벤트객체를 통해 전달할 데이터], 핸들러());추가선택자가 없을경우 : bind()와 동일, 동적처리 불가능추가선택자가 있을경우 : delegate()와 동일, 동적처리 가능 (jquery 1.7이상부터 on메서드로 대체되었다.)jquery 1.7버전 이하에서 동적이벤트 메서드 live()는 이벤트의 설정 대상이 document가 된다. on()메서드에서도 설정대상을 document로 한다.*/$(document).on("click","span", function() { // 추가선택자를 넣고 동적이벤트 바인딩을 할경우 선택자는 document로 지정한다.console.log($(this).text());});$("button").click(function(event) {$("ul").append("<li><span>동적추가요소</span></li>");});// 동적인 바인딩이기에 굳이 $(document).ready() 안에 있을 필요도 없다.//여러개 이벤트 동적 바인딩일경우 다음과 같이 바인딩할수 있다./*$(document).on({focusout: function (event) { ... },keydown: function (event) { ... },mouseover: function (event) { ... },}, 추가선택자 );*//*'추가선택자' 가 생략되거나 null 이면, 이벤트 핸들러는 '선택자'로 이벤트 바인딩 된다.'선택자'에 이벤트를 줬는데 '추가선택자'에서 이벤트가 반응한다.????????추가선택자로 부모요소에게 이벤트 바인딩을 하게 되면 이벤트위임(이벤트버블링)을 통해 '추가선택자'요소에게 이벤트 위임이 이루어진다.이벤트 버블링을 통해 하나의 엘리먼트에가 여러 이벤트를 수행하도록 할 수 있다.이것이바로 이벤트 위임(event delagation)이다.if($(event.target()).is('#foo')) { // 이벤트 발생 요소 확인}*/</script></body></html>
반응형
'jQuery' 카테고리의 다른 글
| [jQuery] mousedown - event.which (마우스 좌,우,휠 클릭 판단) (0) | 2016.01.19 |
|---|---|
| [jQuery] event.namespaces - 이벤트 네임스페이스로 이벤트 구분 (0) | 2016.01.14 |
| [jQuery] $.noop - 빈 함수 (0) | 2015.11.30 |
| [jQuery] $.makeArray - jQuery 확장집합을 배열로 변환 (0) | 2015.11.30 |
| [jQuery] $.param(), serialize(), serializeArray(), JSON.stringify(), JSON.parse() (1) | 2015.11.10 |
