.delegate (selector, eventType, handler) 정보
jQuery .delegate (selector, eventType, handler)본문
.delegate (selector, eventType, handler)
설명 : 특정 루트 요소 집합을 기반으로 현재 또는 미래의 선택자와 일치하는 모든 요소에 대해 하나 이상의 이벤트에 핸들러를 연결합니다.
jQuery 3.0부터는 .delegate()더 이상 사용되지 않습니다. .on()jQuery 1.7 이후이 메서드 로 대체되었으므로이 메서드는 이미 사용되지 않았습니다. 그러나 이전 버전의 경우 이벤트 위임을 사용하는 가장 효과적인 방법으로 남아 있습니다. 이벤트 바인딩 및 위임에 대한 자세한 정보가이 .on()메소드에 있습니다. 일반적으로 다음 두 메소드의 동일한 템플리트입니다.
// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );
예를 들어 다음 .delegate()코드가 있습니다.
$( "table" ).delegate( "td", "click", function() {
$( this ).toggleClass( "chosen" );
});
다음을 사용하여 작성된 다음 코드와 동일합니다 .on().
$( "table" ).on( "click", "td", function() {
$( this ).toggleClass( "chosen" );
});
첨부 된 이벤트를 제거하려면 .undelegate () 메소드를 delegate()참조하십시오 .
이벤트 데이터를 전달하고 처리하는 것과 같은 방법으로 작동합니다 .on().
추가 참고 사항 :
이 .live()메서드는 이벤트가 문서 상단으로 전파되면 이벤트를 처리 하므로 라이브 이벤트 전파를 중지 할 수 없습니다. 비슷하게 처리 된 이벤트 .delegate()는 위임 된 요소로 전달됩니다. DOM 트리에서 그 아래에있는 모든 요소에 바인딩 된 이벤트 핸들러는 위임 된 이벤트 핸들러가 호출 될 때까지 이미 실행되었을 것입니다. 따라서 이러한 처리기는 위임 된 처리기가 호출 event.stopPropagation()하거나 반환 하여 트리거하지 못하게 할 수 있습니다 false.
예 :
단락을 클릭하여 다른 단락을 추가하십시오. .delegate ()는 클릭 이벤트 처리기를 모든 단락에 첨부합니다 (심지어 새로운 단락도 포함).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>delegate demo</title>
<style>
p {
background: yellow;
font-weight: bold;
cursor: pointer;
padding: 5px;
}
p.over {
background: #ccc;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Click me!</p>
<span></span>
<script>
$( "body" ).delegate( "p", "click", function() {
$( this ).after( "<p>Another paragraph!</p>" );
});
</script>
</body>
</html>
0
댓글 0개