Mootools 1.2 튜토리얼 이벤트 처리_Mootools

오늘 다섯 번째 강의를 시작합니다. 이전 강의("Mootools 1.2 Tutorial (4) - Functions")에서는 MooTools 1.2에서 함수를 생성하고 사용하는 여러 가지 방법을 배웠습니다. 다음 단계는 이벤트를 이해하는 것입니다. 선택기와 마찬가지로 이벤트도 대화형 인터페이스를 구축하는 데 중요한 부분입니다. 요소에 대한 핸들이 있으면 어떤 작업이 어떤 효과를 트리거할지 결정해야 합니다. 효과는 나중으로 미루고 먼저 중간 단계와 몇 가지 일반적인 이벤트를 살펴보겠습니다.
왼쪽 클릭 이벤트
왼쪽 클릭 이벤트는 웹 개발에서 가장 일반적인 이벤트입니다. 하이퍼링크는 클릭 이벤트를 인식하고 다른 URL로 이동합니다. MooTools는 다른 DOM 요소의 클릭 이벤트를 인식하여 디자인과 기능에 있어 뛰어난 유연성을 제공합니다. 요소에 클릭 이벤트를 추가하는 첫 번째 단계:
참조 코드:

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

// $('id_name')을 통해 요소 가져오기
// .addEvent를 사용하여 이벤트 추가
// ('클릭')은 이벤트 유형을 정의합니다.
$('id_name').addEvent('click', function(){
//클릭 이벤트가 발생할 때 실행할 코드를 여기에 추가하세요.
alert('이 요소는 이제 클릭 이벤트를 인식합니다.' );
});

이 함수를 .addEvent()에서 분리하여 동일한 작업을 수행할 수도 있습니다.
참조 코드:

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

var clickFunction = function(){
//여기에 원하는 코드를 추가하세요. 이벤트 발생 시 실행하려는 경우
alert('이 요소는 이제 클릭 이벤트를 인식합니다.')
}
window.addEvent('domready', function() {
$('id_name' ).addEvent('click' , clickFunction)
});

참조 코드:

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

-- 이제 이 요소는 클릭 이벤트를 인식합니다. ->

참고: 하이퍼링크 인식 클릭 이벤트와 마찬가지로 MooTools의 클릭 이벤트도 실제로 "마우스 업"을 인식합니다. 마우스를 눌렀을 때가 아니라 마우스를 놓을 때 발생합니다. 이를 통해 사용자는 마우스 포인터를 클릭하기 전에 클릭한 요소에서 멀리 이동하여 마음을 바꿀 수 있습니다.
마우스 인/아웃 이벤트
하이퍼링크는 마우스가 링크 요소 위에 있을 때 "hover" 이벤트도 인식합니다. MooTools를 사용하면 다른 DOM 요소에 호버 이벤트를 추가할 수 있습니다. 이 이벤트를 마우스 입력 및 마우스 떠나기 이벤트로 나누면 사용자 행동에 따라 DOM을 보다 유연하게 조작할 수 있습니다.
이전과 마찬가지로 가장 먼저 해야 할 일은 요소에 이벤트를 연결하는 것입니다.
참조 코드:

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

var mouseEnterFunction = function(){
// 여기에 이벤트가 발생할 때 실행할 코드를 추가하세요.
alert('this 요소 이제 마우스 입력 이벤트를 인식합니다');
}
window.addEvent('domready', function() {
$('id_name').addEvent('mouseenter', mouseEnterFunction);
});

마우스 이탈 이벤트도 마찬가지입니다. 이 이벤트는 마우스 포인터가 요소를 떠날 때 발생합니다.
참조 코드:

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

var mouseLeaveFunction = function() {
//이벤트가 발생할 때 실행할 코드를 여기에 추가하세요.
alert('이 요소는 이제 마우스 떠나기 이벤트를 인식합니다.')
}
window.addEvent( 'domready', function() {
$('id_name').addEvent('mouseleave', mouseLeaveFunction)


이벤트 삭제
해당 이벤트가 더 이상 필요하지 않아 요소에서 이벤트를 삭제해야 하는 때가 올 것입니다. 이벤트를 삭제하는 것은 이벤트를 추가하는 것만큼 쉽고 구조도 유사합니다.
참조 코드:
// 이전 예와 동일
// .addEvent를 .removeEvent로 바꾸세요
$('id_name').removeEvent('mouseleave', mouseLeaveFunction)
텍스트 영역 또는 입력의 주요 이벤트
MooTools를 사용하면 텍스트 영역(텍스트 영역)과 텍스트 상자(입력)의 주요 이벤트를 식별할 수도 있습니다. 구문은 위에서 본 것과 유사합니다.
참조 코드:

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

var function = keydownEventFunction () {
alert('이 텍스트 영역은 이제 키 입력 이벤트를 인식할 수 있습니다.')
window.addEvent('domready', function() {
$('myTextarea').addEvent('keydown', keydownEventFunction);
})

위 코드는 모든 키 입력을 인식합니다. 특정 키를 대상으로 하려면 매개변수를 추가한 다음 if 문을 사용해야 합니다.
참조 코드:

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

// 함수 괄호 안의 "event" 매개변수에 주의하세요
var keyStrokeEvent = function(event){
// 다음 코드는 다음과 같습니다. :
/ / 누른 키가 "k"인 경우 다음을 수행합니다.
if (event.key == "k") {
alert("이 튜토리얼은 문자 k로 표시되었습니다. ")
};
}
window.addEvent('domready', function() {
$('myInput').addEvent('keydown', keyStrokeEvent);
}) ;

"shift" 키 및 "control"과 같은 다른 컨트롤이 필요한 경우 구문이 약간 다릅니다.
참조 코드:

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

var keyStrokeEvent = function(event){
// 다음 코드는 다음과 같습니다.
// 누른 키가 "shift"인 경우 다음을 수행합니다.
if (event.shift) {
alert("Shift를 눌렀습니다.")
};
window.addEvent('domready', function() {
$('myInput').addEvent('keydown', keyStrokeEvent);
})


참조 코드:

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

예

다음은 우리가 작성한 실행 가능한 코드입니다. 위:
참고: 클릭 예제에서 이를 시도해 볼 수 있지만 마우스 버튼을 놓는 대신 마우스 버튼을 블록에서 멀리 누른 다음 다시 놓습니다. 클릭 이벤트가 발생하지 않는다는 점에 유의하세요.
참조 코드:

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

var keyStrokeEvent = function(event ){

// 다음 코드는 다음과 같습니다.
// 누른 키가 "k"이면 다음을 수행합니다.
if (event.key == 'k') {
Alert("이 무토리얼은 'k'라는 문자로 제공되었습니다.")
}
}
var mouseLeaveFunction = function(){
// Any code를 사용할 때 여기에 이벤트를 추가하세요. 실행
alert('이 요소는 이제 마우스 떠나기 이벤트를 인식합니다.');
}
var mouseEnterFunction = function(){
// 발생 시 실행할 이벤트를 여기에 추가하세요. 모든 코드
alert('이 요소는 이제 마우스 입력 이벤트를 인식합니다.');
}
var clickFunction = function(){
// 이벤트가 발생할 때 실행할 코드를 여기에 추가하세요. Code
alert('이 요소는 이제 클릭 이벤트를 인식합니다.')
}
window.addEvent('domready', function() {
$('click').addEvent('click ', clickFunction);
$('enter').addEvent('mouseenter', mouseEnterFunction)
$('leave').addEvent('mouseleave', mouseLeaveFunction)
$('keyevent) ').addEvent('keydown', keyStrokeEvent)
});


참조 코드:

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

왼쪽 클릭(클릭)

마우스 Enter

마우스 나가기< /div>

자세히 알아보기…

시작하는 데 필요한 모든 것이 포함된 zip 패키지를 다운로드하세요.

MooTools 1.2 핵심 라이브러리, 외부 JavaScript 파일, 간단한 HTML 페이지 및 CSS 파일이 포함되어 있습니다.

이벤트 상세정보

MooTools는 여기서 설명하는 것보다 훨씬 더 많은 이벤트 제어 방법을 제공합니다. 자세히 알아보려면 다음 링크를 확인하세요.

• MooTools 문서의 이벤트 섹션
• MooTools 문서의 Element.Events 섹션 또한 w3school 웹사이트에서 JavaScript 이벤트에 대한 내용을 읽어보세요

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.