Mootools 1.2 튜토리얼 이벤트 처리_Mootools-JS 튜토리얼-php.cn

오늘 다섯 번째 강의를 시작합니다. 이전 강의("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) 
}); 


참조 코드: 