JQuery 이벤트 위임 메커니즘의 위임 및 위임 해제 분석 예-JS 튜토리얼-php.cn

JQuery 이벤트 위임 메커니즘의 위임 및 위임 해제 분석 예

黄舟

풀어 주다： 2017-06-26 10:07:28

원래의

1175명이 탐색했습니다.

다음 시나리오를 생각해 보세요. 1p 아래에 3개의 버튼이 있는 경우 각 버튼을 클릭하면 현재 버튼의 ID가 인쇄되어야 합니다.

<p id="parent">
	<input type="button" id="a" value="1"></input>
	<input type="button" id="b" value="2"></input>
	<input type="button" id="c" value="3"></input>
</p>

로그인 후 복사

방법 1: JQuery 선택기를 사용하여 자체 이벤트 처리 기능을 각 버튼에 바인딩합니다.

$("#parent :button").click(function(){
	alert($(this).attr("id"));
})

로그인 후 복사

방법 2: 이벤트 위임 메커니즘을 사용하여 이벤트를 버튼의 상위 요소에만 바인딩합니다.

$("#parent").delegate(":button","click",function(){
	alert($(this).attr("id"));
});

로그인 후 복사

delegate 이 API의 함수 서명은 다음과 같습니다.

delegate(selector, [type], [data], fn)

로그인 후 복사

selector:

은 이벤트를 트리거하는 요소를 필터링하는 데 사용되는 JQuery의 선택기를 나타냅니다. 위의 상위 요소 아래에는 a, b, c 세 개의 버튼이 있습니다. b 버튼을 클릭하면 해당 ID가 인쇄되지 않습니다. 그런 다음 다음 코드를 사용하여 달성할 수 있습니다.

$("#parent").delegate(":button[id!=&#39;b&#39;]","click",{},function(){
	alert($(this).attr("id"));
});

로그인 후 복사

type:

하나 이상의 이벤트가 요소에 첨부되며 여러 이벤트 값이 공백으로 구분됩니다.

data

이벤트 처리 함수에 전달된 매개변수 값입니다.

$("#parent").delegate(":button","click",{name:123},function(event){
	alert(event.data.name);
});

로그인 후 복사

이벤트 발생 시 호출되는 핸들러 함수입니다.

delegate()에는 매우 중요한 속성도 있습니다. Delegate() 메서드를 사용하는 이벤트 핸들러는 현재 존재하거나 향후 추가될 요소에 적용 가능합니다.

아래 코드에서 테스트 버튼을 클릭하면 새 버튼이 생성됩니다. 새로 생성된 버튼을 클릭해도 해당 ID가 계속 인쇄됩니다.

<script src="jquery-1.11.1.js"></script>
<script>
	$(function(){
	
		$("#parent").delegate(":button","click",function(event){
			alert($(this).attr("id"));
		});
		
		
		$("#test").click(function(event){
			$("#parent").append(&#39;<input type="button" id="d" value="4"></input>&#39;);
			
		});
	})
</script>

<body>

	<input type="button" id="test" value="test">
	<p id="parent">
		<input type="button" id="a" value="1"></input>
		<input type="button" id="b" value="2"></input>
		<input type="button" id="c" value="3"></input>
	</p>
</body>

로그인 후 복사

델리게이트()는 어떻게 합니까
? javascript의 이벤트 버블링 메커니즘을 사용하면 매우 간단합니다. 하위 요소가 이벤트를 생성할 때 이 이벤트의 전파가 금지되지 않으면 상위 요소도 이 이벤트를 인식합니다(상위 요소의 이벤트 핸들러가 호출됨). 그리고 Event 개체를 통해 원래 이벤트를 트리거한 요소를 가져올 수 있습니다. 아래 코드에서는 간단한 이벤트 위임 메커니즘을 직접 구현했습니다.

<script src="jquery-1.11.1.js"></script>
<script>
	$(function(){
	
		$("#parent").click(":button",function(event){
			
			// target是最初触发事件的DOM元素。
			var domId = event.target.id;
			
			// 过滤元素
			var filter = event.data;

			if($(event.target).is(filter))
			{
				alert(domId);
			}
			
		});
	
	})
</script>

<body>

	<p id="parent">
		<input type="button" id="a" value="1"></input>
		<input type="button" id="b" value="2"></input>
		<input type="button" id="c" value="3"></input>
		<input type="text" id="d" value="d"></input>
	</p>
</body>

로그인 후 복사

delegate 및 undelegate는 바인딩 및 바인딩 해제와 매우 유사합니다. 여기서 언급하겠습니다. undelegate를 사용하여 이벤트 위임을 취소할 때 이벤트
namespace 메커니즘을 사용할 수도 있습니다. 이 기사에서는 바인딩 및 바인딩 해제를 예로 들어 이벤트 네임스페이스 메커니즘과 이를 사용하는 방법을 자세히 소개합니다.

위 내용은 JQuery 이벤트 위임 메커니즘의 위임 및 위임 해제 분석 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!