JavaScript_javascript 기술의 이벤트 바인딩에 대한 간략한 토론

사실 새로운 지식 포인트는 없습니다. 단지 다른 도움이 필요한 친구들의 편의를 위한 것이기도 하고, 제 자신을 위한 축적이기도 하므로 베테랑들이 마음껏 떠들 수 있을 뿐입니다. .
본론에 들어가기 전에 먼저 질문 하나를 던져보겠습니다.
이제 다음 HTML 구조가 있습니다.

코드 복사 코드는 다음과 같습니다.

및 다음 JavaScript 코드:

코드 복사 코드는 다음과 같습니다.

var Wrap = document.getElementById('wrap') ,
inputs = Wrap.getElementsByTagName( 'input');

for (var i = 0, l = inputs.length; i inputs[i]. onclick = function () {
Alert (i);
}
}

실례합니다. 이 실행 결과는 무엇입니까?
/******************************분리선******************** ******* **********/
"버튼을 클릭하면 현재 버튼의 인덱스 값 i를 경고합니다"라고 대답했다면 내 함정에 빠진 것입니다. 어떤 버튼을 클릭하든 경고(5)가 표시되므로 시도해 볼 수도 있습니다.

당연해 보이는 결과가 실제 상황과 다른 이유는 무엇인가요? 사실 이해하기 쉽습니다.
onclick은 실행이 아닌 이벤트 바인딩일 뿐이므로, 이때 i는 이미 루프 이후의 값이므로 각 버튼이 경고하는 것만으로는 충분하지 않습니다. 이상한.

그럼 "버튼을 클릭하면 현재 버튼의 인덱스 값 i에 대해 경고"를 어떻게 구현하나요? 여기서 우리는 JavaScript에 숨겨진 미스터리인 "클로저"라는 개념을 사용해야 합니다. 클로저를 사용하여 위의 JS를 다시 작성하여 for 루프의 i 값을 메모리에 저장할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var Wrap = document.getElementById('wrap'),
inputs = Wrap.getElementsByTagName('input')

for (var i = 0, l = inputs.length; i (function (cur) {
inputs[cur].onclick = function () {
경고(cur);
} }
})(i)
}

효과를 다시 시도하시겠습니까? 해당 지수 값이 알림을 받을 수 있는 것은 사실이지만 아직까지는 에피타이저일 뿐이고 메인 주제는 이제 막 시작되었습니다! 위 방법에서는 루프 클로저를 통해 이벤트를 버튼에 바인딩합니다. JavaScript의 함수도 객체이며, 현재 예에서는 버튼이 5개만 있다고 생각할 수도 있습니다. 성능 오버헤드는 무시할 수 있지만 버튼이 50개 또는 500개라도 있으면 IE는 동시에 다른 성능 위험이 더 커지면 울게 됩니다.

방금 예로 돌아가서, 버튼이 증가함에 따라 바운드 이벤트가 증가하여 발생할 수 있는 성능 문제를 "이벤트 위임" 방법을 사용하여 해결할 수 있습니다. 원리는 매우 간단합니다. Javascript의 이벤트 버블링을 사용하면 버튼에서 해당 부모 요소로 이벤트 바인딩을 이동할 수 있습니다. 버튼이 아무리 많아도 공통 부모 요소는 하나만 있으므로 이벤트를 한 번만 바인딩하면 됩니다. 그것에.

코드는 다음과 같습니다.

코드를 복사합니다코드는 다음과 같습니다.

var Wrap = document.getElementById('wrap'),
inputs = Wrap.getElementsByTagName('input');

wrap.onclick = function(ev) {
var ev = ev || window.event,
target = ev.srcElement
for (var i = 0, l = inputs.length; i             if (입력[i] === 대상) {                                                                    ~     조금 더 깊이 알아보고 디저트를 드세요.
클로저 이벤트 바인딩에 비해 이벤트 위임이 갖는 성능 이점 외에도 이벤트 위임에서는 하위 요소(예: 이벤트가 바인딩되는 요소) 수를 고려할 필요가 없습니다. 예를 들어, onclick 이벤트를 바인딩한 후
버튼을 추가합니다:

코드 복사
코드는 다음과 같습니다. 다음과 같습니다:

var newInput = document.createElement('input') newInput.setAttribute('type', 'button') newInput.setAttribute('value' , '버튼 6'); wrap.appendChild(newInput);

이 코드의 클로저 메소드와 이벤트 위임 메소드도 마지막에 추가된 것을 볼 수 있습니다. 클로저에 의해 구현됨 "Button Six"를 클릭하면 아무런 효과가 없지만 이벤트 대리자에 구현된 이벤트 바인딩을 통해 "Button Six"를 클릭하면 경고가 발생합니다. 반대로 버튼을 삭제하려는 경우 클로저 메서드는 삭제된 버튼의 onclick 이벤트를 메모리에 계속 저장하며(수동으로 null로 설정하지 않는 한) 이벤트 대리자는 메모리에 불필요한 부담을 주지 않습니다. 이러한 이유로 동일한 수준에서 여러 요소를 바인딩하려면 이벤트 위임을 더 많이 사용해야 합니다.