jQueryのイベントを詳しく解説

概要

jQuery は、基本的なイベント処理メカニズムを追加および拡張します。これにより、よりエレガントなイベント処理構文が提供されるだけでなく、イベント処理機能も大幅に強化されます

jQuery のイベント

DOM の読み込み

jQuery では、 $(document).ready() メソッドは JavaScript の window.onload メソッドを置き換えるために使用されますが、いくつかの違いもあります

1. 実行タイミング

たとえば、たくさんの写真がある Web ページがあります

(document).ready() メソッドは、この Web ページの DOM ツリーが読み込まれた後に実行できます。jQuery を使用する場合、window.onload メソッドは、DOM ツリーと画像が読み込まれた後に実行する必要があります。ページ全体がロードされると、load() メソッドを使用できます

次の 2 つのコードの関数は同じです

// jQuery
$(window).load(function(){
  // 代码1
});
// JavaScript
window.onload = function(){
  // 代码2
};

2. 複数回使用してください

JavaScript の onload イベントでは、1 つの関数への参照のみを保存できます。 $( document).ready() は複数の

function one(){
  alert('1');
}
function two(){
  alert('2');
}
// JavaScript
window.onload = one;
window.onload = two;//只执行two()
// jQuery
$(document).ready(function(){
  one();
});
$(document).ready(function(){
  two();
});//one() 和 two()都会执行

3 を保存できます。 略語

$(document).ready(function(){});

イベントバインディング

bind()関数の構文：bind(type,[.data],fn)

最初のパラメータはイベントタイプです

2番目のパラメータはオプションのパラメータであり、 event.data 属性値としてのイベント オブジェクト 追加のデータ オブジェクト

3 番目のパラメータはバインディングに使用される処理関数です

例として、2 つの div があり、最初の div をクリックすると、 2番目のdivが表示されます

<div id="div1"></div>
<div id="div2"></div>
<script type="text/javascript">
$(function(){
  $(&#39;#div1&#39;).bind(&#39;click&#39;,function(){
    $(this).next().show();
  });
   
});

div1をクリックするとdiv2が表示されている場合は非表示にし、そうでない場合は表示する機能を追加しました

$(function(){
  $('#div1').bind('click',function(){
    if($(this).next().is(':visible')){
      $(this).next().hide();
    }else{
      $(this).next().show();
    }
  });
});

合成イベント

1を使用します。カーソルホバリングイベントをシミュレートします。最初の関数はカーソルが要素に移動したときにトリガーされ、2 番目の関数はカーソルが要素の外に移動したときにトリガーされます

$('#div1').click(function(){
  if($(this).next().is(':visible')){
     $(this).next().hide();
   }else{
     $(this).next().show();
   }
})

2。 toggle() メソッド

は、マウスの連続クリック イベントをシミュレートするために使用されます。初めてのマウスクリック 要素をクリックして最初の関数をトリガーし、同じ関数をクリックすると 2 番目の関数がトリガーされます

$('#div1').hover(function(){
  $(this).next().show();
},function(){
  $(this).next().hide();
});

イベントのバブリングを防止し、デフォルトの動作を防止します

1. stopPropagation() メソッド

2. デフォルトの動作を防ぐ

preventDefault() メソッド

注: 1. jQuery で false を返すと、イベントのバブリングが防止され、デフォルトの動作が防止されます

2. jQuery はイベント キャプチャをサポートしません

イベントのプロパティobject

1.event.type

変更されたメソッドの目的は、イベントのタイプを取得することです

$('#div1').toggle(function(){
  $(this).next().show();
},function(){
  $(this).next().hide();
});

2、event.target

イベントをトリガーした要素を取得することです

$('#div1').click(function(ev){
   alert(ev.type);//click
 })

3、event.popularTarget

関連要素を取得します

4、event.pageXとevent.pageY

ページに対するカーソルのX座標とY座標を取得します

$('#div1').click(function(ev){
  alert(ev.target.id);//div1
 })

5 このメソッドの機能は次のとおりです。マウスクリックイベントでマウスの左、中、右ボタンを取得します ;キーボードイベントでキーボードキーを取得します

$('#div1').click(function(ev){
 alert(ev.pageX + ',' + ev.pageY);//275,181
 })

イベントを削除します

unbind() メソッドの構文: unbind([type],[data] );

最初のパラメータはイベントタイプで、2番目のパラメータは削除する関数です

例を見て、次のイベントをdiv1にバインドします

$('#div1').click(function(ev){
 alert(ev.which);//1是鼠标左键，2是鼠标中见，3是鼠标右键
})

1.パラメータがない場合は、バインドされているすべてを削除しますevents

$('#div1').unbind();//すべてのイベントを削除

2. イベント タイプがパラメーターとして指定されている場合、そのタイプのバインディング イベントのみが削除されます

使用する 使用する 使用するusing through バインディング時に渡された処理関数が 2 番目のパラメーターとして使用されている場合、この特定の時間の処理関数のみが削除されます

シミュレーション操作

1 よく使用されるシミュレーション

jQuery では、trigger() メソッドを使用して次のことを行うことができます。次のような完全なシミュレーション操作() メソッドは、サーバーでサポートされている同じ名前のイベントを参照するだけでなく、カスタム名でイベントをトリガーすることもできます。

$('#div1').bind('click',function(){
  alert('1');
}).bind('click',function(){
  alert('2');
}).bind('mouseover',function(){
  alert('3');
})

3. データを渡す

$('#btn').bind('myclick',function(){
  alert('1');
});
$('#btn').trigger('myclick');

4. デフォルトの操作を実行します

$('input').trigger('focus');

上記のコードは、input 要素の focus イベントをトリガーします。 要素自体がフォーカスを取得します

要素にバインドされた特定のイベントのみをトリガーし、このイベントに対するブラウザのデフォルトの操作をキャンセルしたい場合は、triggerHandler() メソッドを使用できます

その他の使い方

管理を便利にするためにイベント名前空間を追加する

例えば、要素にバインドされた複数のイベントタイプは、名前空間を使用して標準化できます

$('#btn').bind('myclick',function(event,message1,message2){
 alert(message1 + message2);
});
$('#btn').trigger('myclick',["1","2"]);

以上がこの記事の内容の全体です。皆さんの勉強や仕事に少しでもお役に立てれば幸いです。また、サポート PHP 中国語 Web サイトが増えることを願っています。

jQuery のイベントに関連する詳細な記事については、PHP 中国語 Web サイトに注目してください。