Mootools 1.2 チュートリアルイベント処理_Mootools-jsチュートリアル-php.cn

今日は 5 番目の講義を開始します (「Mootools 1.2 チュートリアル (4) - 関数」)。MooTools 1.2 で関数を作成および使用するためのいくつかの異なる方法を学びました。次のステップは、イベントを理解することです。セレクターと同様に、イベントも対話型インターフェイスを構築する上で重要な部分です。要素を理解したら、どのアクションがどの効果を引き起こすかを決定する必要があります。効果については後回しにして、最初に中間ステップといくつかの一般的なイベントを見てみましょう。
左クリックイベント
左クリックイベントは、Web 開発で最も一般的なイベントです。ハイパーリンクはクリックイベントを認識し、別の URL に移動します。 MooTools は他の DOM 要素のクリックイベントを認識できるため、設計と機能に大きな柔軟性が与えられます。要素にクリックイベントを追加する最初のステップ:
リファレンスコード:

コードをコピーコードは次のとおりです。

// $('id_name') を通じて要素を取得します 
// .addEvent でイベントを追加します 
// ('click') イベントのタイプを定義します 
 $('id_name ').addEvent('click', function(){ 
//クリック イベントの発生時に実行するコードをここに追加します 
alert('この要素はクリック イベントを認識するようになりました' ); 
 }); 

この関数を .addEvent(); から分離することもできます。
参照コード:

コードをコピーコードは次のとおりです:

var clickFunction = function(){ 
//ここに任意のコードを追加しますイベントの発生時に実行したい 
alert('この要素はクリック イベントを認識するようになりました'); 
} 
window.addEvent('domready', function() { 
$('id_name' ).addEvent('click' , clickFunction); 

参照コード:

コードをコピーしますコードは次のとおりです:

注: ハイパーリンク認識クリックイベントと同様に、MooTools のクリックイベントは実際には「マウスアップ」を認識します。マウスを押したときに発生するのではなく、マウスを放したときに発生するということです。これにより、マウスポインタを放す前に、クリックした要素からマウスポインタを遠ざけるだけで、ユーザーは考えを変える機会が得られます。
マウスインおよびマウスアウトイベント
ハイパーリンクは、マウスがリンク要素の上にあるときの「ホバー」イベントも認識します。 MooTools を使用すると、ホバーイベントを他の DOM 要素に追加できます。このイベントをマウス入力イベントとマウス離脱イベントに分割することで、ユーザーの動作に基づいて DOM をより柔軟に操作できるようになります。
前と同様、最初に要素にイベントをアタッチする必要があります:
参照コード:

コードをコピーコードは次のとおりです。

var MouseEnterFunction = function(){ 
// イベントの発生時に実行するコードをここに追加します 
alert('this elementマウス Enter イベントを認識するようになりました'); 
window.addEvent('domready', function() { 
$('id_name').addEvent('mouseenter', MouseEnterFunction); 
 }); 


マウス離脱イベントも同様です。このイベントは、マウス ポインタが要素から離れると発生します。 

参照コード:

コードをコピーコードは次のとおりです:

var MouseLeaveFunction = function() {

//イベントの発生時に実行するコードをここに追加します
alert('この要素はマウス離脱イベントを認識するようになりました');
}
window.addEvent( 'domready', function() {
$('id_name').addEvent('mouseleave', movieLeaveFunction);

イベントを削除する
それらのイベントが不要になり、要素からイベントを削除する必要が生じるときが来ます。イベントの削除は追加と同じくらい簡単で、構造も同様です。
参照コード:
// 前の例と同じ
// .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("You pressed shift.") 
}; 
window.addEvent ('domready', function() { 
$('myInput').addEvent('keydown', keyStrokeEvent); 
});コード: 

コードをコピー

コードは次のとおりです:

例
ここで私たちが書いた実行可能コードをいくつか示します上: 
 注: クリックの例でこれを試すことができますが、その上でマウス ボタンを放すのではなく、マウス ボタンを押したままブロックから離し、再度放します。クリック イベントが発生しないことに注意してください。 
参照コード: 

コードをコピー

コードは次のとおりです: var keyStrokeEvent = function(event ){ // 次のコードは次のようになります: // 押されたキーが "k" の場合、次の処理を実行します if (event.key == 'k') {

alert("この Mootorial は、文字 'k.' によって提供されました。")

} 
} 
var MouseLeaveFunction = function(){ 
// 任意のコードを実行したときにここにイベントを追加します
alert('この要素はマウス離脱イベントを認識するようになりました'); 
var MouseEnterFunction = function(){ 
// 発生時に実行するイベントをここに追加します任意のコード 
alert('この要素はマウス入力イベントを認識するようになりました'); 
} 
var clickFunction = function(){ 
// イベントの発生時に実行するコードをここに追加しますコード
alert('この要素はクリック イベントを認識するようになりました'); 
} 
window.addEvent('domready', function() { 
$('click').addEvent('click ', clickFunction); 
$('enter').addEvent('mouseenter',mouseEnterFunction); 
$('leave').addEvent('mouseleave', mouseLeaveFunction); ').addEvent('keydown', keyStrokeEvent); 


参照コード: 




 コードをコピーします。 

 コードは次のとおりです: 