JavaScript 이벤트 위임 및 jQuery 이벤트 바인딩 켜짐, 꺼짐 및 하나

1. 이벤트위임
이벤트위임이란? 현실적인 이해는 100명의 학생이 특정 날짜 정오에 동시에 특급 배송을 받지만 이 100명의 학생이 동시에 교문에 서서 기다리는 것은 불가능하므로 도어맨에게 픽업을 맡기는 것입니다. , 그리고 학생들에게 하나씩 건네줍니다.
jQuery에서는 이벤트 버블링 기능을 사용하여 하위 요소에 바인딩된 이벤트가 상위 요소(또는 상위 요소)까지 버블링되도록
한 후 관련 처리를 수행합니다.
엔터프라이즈 수준 애플리케이션이 보고서를 처리하는 경우 테이블에는 2000개의 행이 있고 각 행에는 처리를 위한 버튼이 있습니다.
이전에 .bind()를 사용하면 2000개의 이벤트를 바인딩해야 합니다. 마치 2000명의 학생이 교문에서
택배를 기다리며 교차로를 끊임없이 막아 각종 사고를 일으키게 되는 것과 같습니다. 페이지에도 동일한 상황이 적용되어
페이지가 극도로 느려지거나 직접적으로 비정상이 될 수 있습니다. 게다가 ajax를 사용하여 2000개의 버튼에 페이지를 매긴 경우 .bind() 메서드는 아직 존재하지 않는 요소를 동적으로 바인딩할 수 없습니다
. 예를 들어, 택배사가 새로 편입한 학생의 신원을 확인할 수 없는 경우 택배를 받지 못할 수도 있습니다.
//HTML 부분

<div style="background:red;width:200px;height:200px;" id="box">
<input type="button" value="按钮" class="button" />
</div>

//.bind()를 사용하면 동적 바인딩 기능이 없으므로 원본 버튼을 클릭해야만 생성 가능

$('.button').bind('click', function () {
$(this).clone().appendTo('#box');
});

//jQuery1.3에서 사용되고 jQuery1.7 이후에 폐기되었으며 jQuery1.9에서 삭제된 동적 바인딩 기능과 함께 .live()를 사용합니다

$('.button').live('click', function () {
$(this).clone().appendTo('#box');
});

.live() 원칙은 다음과 같습니다. 클릭 이벤트 바인딩을 상위 요소 $(document)로 변환하면 $(document)를 2000번이 아니라 한 번만 바인딩하면 됩니다. 그런 다음 동적으로 로드되는 후속 버튼의 클릭 이벤트를 처리할 수 있습니다.

이벤트를 수락하면 $(document) 객체는 이벤트 유형(event.type)과 이벤트 대상(event.target)을 확인합니다. click
이벤트가 .button이면 처리가 위임됩니다. 프로그램을 수행하게 됩니다. .live() 메소드가 삭제되어 사용할 수 없습니다.
테스트하고 사용하려면 이전 버전과 호환되는 플러그인을 도입해야 합니다.

위의 예에서는 .clone()을 사용하여 복제했습니다. 실제로 이벤트 동작을 복사하려면 true(.clone(true))만 전달하면 됩니다. 이는 이벤트 위임과 유사한 기능을 달성할 수도 있지만 원칙은 완전히 다릅니다.

//.live()无法使用链接连缀调用，因为参数的特性导致
$('#box').children(0).live('click', function () {
$(this).clone().appendTo('#box');
});

하나는 이벤트 동작을 복사하는 것이고, 다른 하나는 이벤트 위임입니다. 비복제 작업에서 이러한 기능은 이벤트 위임만 사용할 수 있습니다.

이벤트 위임을 중지해야 할 경우 .die()를 사용하여 취소할 수 있습니다.

$('.button').live('click', function () {
$(&#39;<input type="button" value="复制的" class="button" />&#39;).appendTo(&#39;#box&#39;);
});

참고: .delegate()는 상위 요소를 지정해야 하며 첫 번째 매개변수는 현재 요소이고 두 번째 매개변수는 이벤트 메서드

이고 세 번째 매개변수는 실행 기능. .bind() 메서드와 마찬가지로 추가 매개변수를 전달할 수 있습니다. .undelegate() 및 .unbind()

$('.button').die('click');
由于.live()和.die()在jQuery1.4.3 版本中废弃了，之后推出语义清晰、减少冒泡传播层次、
又支持链接连缀调用方式的方法：.delegate()和.undelegate()。但这个方法在jQuery1.7 版本中
被.on()方法整合替代了。
$('#box').delegate('.button', 'click', function () {
$(this).clone().appendTo('#box');
});
$('#box').undelegate('.button','click');
//支持连缀调用方式
$('div').first().delegate('.button', 'click', function () {
$(this).clone().appendTo('div:first');
});

메서드는 .undelegate('click')과 같은 모든 이벤트를 직접 삭제할 수 있습니다. 네임스페이스 이벤트를 삭제할 수도 있습니다(

예: .undelegate('click.abc')).
참고: .live(), .delegate() 및 .bind() 메서드는 모두 이벤트 바인딩이므로 사용 측면에서
는 두 가지 규칙을 따릅니다. 1. 요소가 많습니다. DOM에서 동일한 이벤트를 바인딩하는 경우 2. 아직 DOM에서 생성할
요소 바인딩 이벤트가 없는 경우 이벤트 대리자 바인딩 방법을 사용하는 것이 좋습니다. 그렇지 않으면 .bind( ).



2. on, off 및 one

현재 이벤트 바인딩 및 바인딩 해제에는 6가지 메서드로 구성된 세 그룹이 있습니다. 이 세 그룹이 공존하면 혼란이 생길 ​​수 있으므로

이러한 이유로 jQuery 1.7 이상에서는 처음 세 그룹을 완전히 버리기 위해 .on() 및 .off() 메서드를 도입했습니다.
/


또는

/替代.bind()方式
$('.button').on('click', function () {
alert('替代.bind()');
});
//替代.bind()方式，并使用额外数据和事件对象
$('.button').on('click', {user : 'Lee'}, function (e) {
alert('替代.bind()' + e.data.user);
});
//替代.bind()方式，并绑定多个事件
$('.button').on('mouseover mouseout', function () {
alert('替代.bind()移入移出！');
});
//替代.bind()方式，以对象模式绑定多个事件
$('.button').on({
mouseover : function () {
alert('替代.bind()移入！');
},
mouseout : function () {
alert('替代.bind()移出！');
}
});
//替代.bind()方式，阻止默认行为并取消冒泡
$('form').on('submit', function () {
return false;
});

$('form').on('submit', false);
//替代.bind()方式，阻止默认行为
$('form').on('submit', function (e) {
e.preventDefault();
});
//替代.bind()方式，取消冒泡
$('form').on('submit', function (e) {
e.stopPropagation();
});
//替代.unbind()方式，移除事件
$('.button').off('click');
$('.button').off('click', fn);
$('.button').off('click.abc');
//替代.live()和.delegate()，事件委托
$('#box').on('click', '.button', function () {
$(this).clone().appendTo('#box');
});
//替代.die()和.undelegate()，取消事件委托
$('#box').off('click', '.button');
注意：和之前方式一样，事件委托和取消事件委托也有各种搭配方式，比如额外数据、
命名空间等等，这里不在赘述。
不管是.bind()还是.on()，绑定事件后都不是自动移除事件的，需要通过.unbind()和.off()
来手工移除。jQuery 提供了.one()方法，绑定元素执行完毕后自动移除事件，可以方法仅触
发一次的事件。
//类似于.bind()只触发一次
$('.button').one('click', function () {
alert('one 仅触发一次！');
});
//类似于.delegate()只触发一次
$('#box).one('click', 'click', function () {
alert('one 仅触发一次！');
});

3. 이벤트 위임 예시:

html 코드:

jQuery 코드:

<div>
<input id="a" type="button" value="按钮1">
<input id="a" type="button" value="按钮2">
</div>

[버튼 1]을 클릭하면 다음과 같이 팝업됩니다. 이벤트 유형: 클릭, 값: 버튼 1.

$('div').click(function(e){
alert('事件类型：'+ e.type + '，Value：' + $(e.target).val());
})

참고: e.type은 click, mousedown과 같은 개체의 이벤트 유형을 반환하고, e.target은 이벤트를 트리거한 jQuery 개체를 반환합니다.

4. JQuery 라이브러리 선택을 지원하고 html, css, js 코드를 테스트할 수 있는 javascript 온라인 테스트 도구를 권장합니다.

http://jsfiddle.net

위 내용은 javascript 이벤트 위임과 jQuery 이벤트 바인딩 on, off 에 대한 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!