JavaScript 프레임워크 비교: 이벤트 처리

모든 JavaScript 프레임워크는 크로스 브라우저 이벤트 처리를 구현하여 이전 스타일의 이벤트 인라인 추가에서 벗어나 간소화된 선형 접근 방식을 사용하도록 권장합니다. hover 이벤트를 사용하여 div 요소를 강조표시하는 Listing 6의 jQuery 예제를 살펴보세요.

목록 6: jQuery를 사용하여 호버 이벤트 연결

$('#the-box').hover(function() {
$(this).addClass('하이라이트');
}, 기능() {
$(this).removeClass('highlight');
});

이는 jQuery의 특별한 이벤트이며 두 가지 기능을 제공한다는 것을 알 수 있습니다. 첫 번째 함수는 onMouseOver 이벤트가 실행될 때 호출되고, 두 번째 함수는 onMouseOut 이벤트가 실행될 때 호출됩니다. 호버에 대한 표준 DOM 이벤트가 없기 때문입니다. click과 같은 보다 일반적인 이벤트를 살펴보겠습니다(목록 7 확인).

목록 7: jQuery를 사용하여 클릭 이벤트 첨부

$('#the-button').click(function() {
Alert('버튼을 눌렀습니다!');
});

보시다시피 인스턴스에는 함수 매개변수가 하나만 있습니다. jQuery의 대부분의 이벤트는 jQuery의 이벤트 핸들러를 사용하여 동일한 방식으로 처리됩니다. 컨텍스트는 이벤트를 트리거한 개체를 나타냅니다. 일부 프레임워크는 이런 방식으로 작동하지 않습니다. Prototype의 경우 목록 7의 코드는 목록 8과 같습니다.

목록 8: Prototype을 사용하여 클릭 이벤트 연결

$('the-button').observe('클릭', function(e) {
Alert('버튼을 눌렀습니다!');
});

가장 먼저 눈에 띄는 것은 클릭 기능이 없고 자체 참조하기 전에 이벤트 매개변수를 받아들이는 관찰 기능이 있다는 것입니다. 또한 함수가 매개변수 e를 허용한다는 사실도 알 수 있습니다. 여기서 컨텍스트는 이벤트를 트리거한 요소를 나타냅니다. 어떻게 작동하는지 확인하기 위해 Prototype을 사용하여 목록 6의 코드를 다시 작성해 보겠습니다(목록 9 참조).

목록 9: Prototype을 사용하여 호버 이벤트 연결

$('the-box').observe('mouseover', function(e) {
var el = Event.element(e);
el.addClassName('highlight');
});
$('the-box').observe('mouseout', function(e) {
var el = Event.element(e);
el.removeClassName('highlight');
});

jQuery도 다릅니다. 컨텍스트 변수를 가져오려면 $ 함수만 사용하면 되는 반면 Prototype 라이브러리는 Event.element() 함수를 사용합니다. 또한, mouseover 및 mouseout 이벤트를 분리해야 한다는 점을 확인했습니다.

이 기사의 일부 튜토리얼을 통해 함수가 인라인으로 생성되고 이름이 지정되지 않음을 확인할 수 있습니다. 이는 재사용할 수 없음을 의미하며 Prototype의 hover 예제는 명명된 함수를 사용하는 방법을 확인할 수 있는 기회도 제공합니다. 목록 10에서는 이 방법을 보여줍니다.

목록 10: Prototype을 사용하여 호버 이벤트 개선

이 시점에서는 하나의 함수만 정의하면 된다는 것을 알 수 있습니다. 이는 mouseover 및 mouseout 이벤트에 의해 호출됩니다. 이 함수는 요소에 "강조 표시" 클래스 이름이 있는지 확인하고 결과에 따라 이를 추가하거나 제거합니다. 또한 매개변수 e가 암시적으로 전달된다는 점도 알 수 있습니다. 즉, 관찰 함수에 모호한 인수를 전달했습니다.

재인쇄 주소: http://www.denisdeng.com/?p=720

원래 주소: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html

함수 토글클래스(e) {
var el = Event.element(e);
if(el.hasClassName('하이라이트'))
row.removeClassName('highlight');
또 다른
row.addClassName('하이라이트');
}

$('the-box').observe('mouseover',ggleClass);
$('the-box').observe('mouseout',ggleClass);