JQuery 이벤트 위임 메커니즘의 위임 및 위임 해제 분석 예
- 黄舟원래의
- 2017-06-26 10:07:281193검색
다음 시나리오를 생각해 보세요. 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!='b']","click",{},function(){
alert($(this).attr("id"));
});type:
하나 이상의 이벤트가 요소에 첨부되며 여러 이벤트 값이 공백으로 구분됩니다.
data
이벤트 처리 함수에 전달된 매개변수 값입니다.
$("#parent").delegate(":button","click",{name:123},function(event){
alert(event.data.name);
});fn
이벤트 발생 시 호출되는 핸들러 함수입니다.
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('<input type="button" id="d" value="4"></input>');
});
})
</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 중국어 웹사이트의 기타 관련 기사를 참조하세요!