.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>
게시판 목록
개발자팁
질문은 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 4886 | PHP | 7년 전 | 2384 | ||
| 4885 | PHP | 7년 전 | 2703 | ||
| 4884 | 기타 | 7년 전 | 3080 | ||
| 4883 | PHP | 7년 전 | 2361 | ||
| 4882 | PHP | 7년 전 | 3699 | ||
| 4881 | PHP | 7년 전 | 3337 | ||
| 4880 | JavaScript | 7년 전 | 3340 | ||
| 4879 | JavaScript | 7년 전 | 3060 | ||
| 4878 | PHP | 7년 전 | 5450 | ||
| 4877 | PHP |
welcome
|
7년 전 | 2909 | |
| 4876 | OS | 7년 전 | 2934 | ||
| 4875 | 기타 | 7년 전 | 2385 | ||
| 4874 | PHP |
|
7년 전 | 2748 | |
| 4873 | 웹서버 |
black
|
7년 전 | 2355 | |
| 4872 | PHP |
|
7년 전 | 3573 | |
| 4871 | 기타 | 7년 전 | 3350 | ||
| 4870 | 기타 | 7년 전 | 5650 | ||
| 4869 | 기타 | 7년 전 | 4215 | ||
| 4868 | JavaScript | 7년 전 | 4579 | ||
| 4867 | PHP |
|
7년 전 | 3920 | |
| 4866 | JavaScript | 7년 전 | 4439 | ||
| 4865 | PHP | 7년 전 | 5626 | ||
| 4864 | jQuery | 7년 전 | 2586 | ||
| 4863 | jQuery |
루돌프사슴코
|
7년 전 | 3990 | |
| 4862 | JavaScript | 7년 전 | 7799 | ||
| 4861 | 기타 | 7년 전 | 2255 | ||
| 4860 | 웹서버 | 7년 전 | 2499 | ||
| 4859 | 기타 | 7년 전 | 6951 | ||
| 4858 | 기타 | 7년 전 | 5114 | ||
| 4857 | 웹서버 | 7년 전 | 6192 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기