jquery 이벤트 위임자()_jquery 사용 방법에 대한 자세한 설명

먼저 대리자() 메서드에 대해 공식이 말하는 내용을 살펴보겠습니다. 이러한 이벤트가 발생합니다. 함수, 대리자() 메서드를 사용하는 이벤트 핸들러는 현재 또는 미래 요소(예: 스크립트에 의해 생성된 새 요소)에 적용됩니다.
구문매우 간단합니다

$(selector).delegate(childSelector,event,data,function)

매개변수 설명

• childSelector가 필요합니다. 이벤트 핸들러가 연결되는 하나 이상의 하위 요소를 지정합니다.
• 이벤트 필수입니다. 요소에 연결할 하나 이상의 이벤트를 지정합니다.
• 공백으로 구분된 여러 이벤트 값. 유효한 이벤트여야 합니다.
• 데이터 선택사항. 함수에 전달될 추가 데이터를 지정합니다.
• 기능이 필요합니다. 이벤트가 발생할 때 실행할 함수를 지정합니다.

대리자 기능은 특정 유형의 공통 상위 요소에 의해 호출됩니다.

listNode.delegate('.condition-remove','click',function(e){
e.preventDefault();
$(this).parents('.search-condition-item').remove();
});

전체 예(효과 달성)

function renderSearchConditions(selectionId,conditions){var conditionsTemplate = '<div class="search-conditions-list-section">'+
'<ul class="search-conditions-list"></ul>'+
'</div>',
listNode = $(conditionsTemplate);
listItemTemplate = '<li class="search-condition-item" data-type="{conditonType}"><span>{condition}</span><a class="condition-remove" href="#">x</a></li>';
for(var key in conditions)
{
var condition = conditions[key].keyword,
conditionType = conditions[key].type,
listItemNode = $.substitute(listItemTemplate,{conditionType:conditionType,condition:condition});
listNode.append(listItemNode);
}
$(selectionId).prepend(listNode);
listNode.delegate('.condition-remove','click',function(e){
e.preventDefault();
$(this).parents('.search-condition-item').remove();

});
}

1. 바운드 트랜잭션에서 트랜잭션 소스를 얻고 hide 메소드를 호출한 후 트랜잭션 소스 객체를 전달합니다.

$(document).delegate("body"， "click"， function(e) {
  var ev = e || window.event; // 事务
  //var target = ev.target || ev.srcElement; // 获得事务源
  hide(ev.target || ev.srcElement， true);
 });

$(window)는 원래 사용하던 것인데, IE8 이전에는 버그가 있었던 것 같습니다.
$(document)의 단점은 페이지가 로드된 후 한 번만 실행된다는 점입니다...
2. hide 메소드에서는 트랜잭션 소스가 지정된 요소에서 내보내지는지, 즉 트랜잭션 소스 요소가 지정된 요소의 하위 요소인지 아니면 그 자체인지 확인합니다.

//子元素断定====
 if (!!window.find)HTMLElement.prototype.contains = function(B) {
  return this.compareDocumentPosition(B) - 19 > 0
 };
 function hide(dom， isClick) {
  var nn，t，_isClick = !!isClick;
  try {
   for (var n in objList) {
    nn = objList[n];
    t = nn.getOption("target")[0];
    if (_isClick && (t == dom || t.contains(dom)))return;
    if (!_isClick || !nn.box[0].contains(dom)) nn.hide();
   }
  } catch(e) {
  }
 }

3. 위의 hide 메소드에서 isClick 변수는 클릭 이벤트 실행 여부를 결정합니다. 크기 조정을 처리하기 위해. Resize는 메모리 소비를 줄이기 위해 처리에 settimeout을 사용합니다.

var reTime = null;
 $(window).bind("resize"， function() {
  if (reTime) clearTimeout(reTime);
  reTime = setTimeout(hide， 50);
 });

이상은 jquery 이벤트 대리자()의 사용법에 대한 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.