jQuery の on() 関数の役割と使用法を分析する-jsチュートリアル-php.cn

jQuery の on() 関数の役割と使用法を分析する

巴扎黑

リリース： 2017-06-25 10:39:18

オリジナル

1771 人が閲覧しました

この記事では、主に jQuery での on() メソッドの使用法を紹介し、on() メソッドの関数と定義を例と、1 つ以上のイベント処理関数を一致する要素にバインドする使用スキルを分析します。 need it can 参考までに、

この記事では、jQuery の on() メソッドの使用法を例とともに説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです:

このメソッドは、1 つ以上のイベント処理関数を一致する要素にバインドできます。
on() メソッドでバインドされたイベントを削除するには、off() メソッドを使用します。

文法構造 1:

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

$(selector).on(events,[selector],[data],fn)

パラメータリスト:

パラメータ	説明
イベント	スペースで区切られた1つ以上のイベントタイプとオプションの名前空間。
セレクター	オプション。選択された要素をフィルターするためのセレクター string。ハンドラーはこのセレクターの子孫要素に対して呼び出されます。選択範囲が空であるか無視された場合、イベントは選択された要素に到達すると常に発生します。
データ	はオプションです。イベントハンドラー関数による処理のために、event.data プロパティの値としてイベントオブジェクトに渡される追加のデータオブジェクト。
fn	このイベントがトリガーされたときに実行される関数。 false 値は、false を返す関数の短縮形としても使用できます。

コード例:

例 1:

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

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
p{
  width:60px;
  height:60px;
  border:1px solid green;
  font-size:12px;
}
</style>
<script type="text/
javascript
" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("p").on("click",function(){ 
    $(this).text("脚本之家欢迎您"); 
  }) 
}) 
</script>
</head>
<body>
<p>原来内容</p>
</body>
</html>

ログイン後にコピー

上記のコードは、p をクリックすると、p に新しいテキストコンテンツを設定できます。

例 2:

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

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
p{
  width:60px;
  height:60px;
  border:1px solid green;
  font-size:12px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("p").on("click mousemove",function(){ 
    $(this).text("脚本之家欢迎您"); 
  }) 
}) 
</script>
</head>
<body>
<p>原来内容</p>
</body>
</html>

ログイン後にコピー

上記のコードは、2 つのイベントを p にバインドします。p をクリックするか、p 内でマウスを移動すると、新しいテキストコンテンツが p に設定されます。

例 3:

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

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title> 
<style type="text/css"> 
p{ 
  width:60px; 
  height:60px; 
  border:1px solid green; 
  font-size:12px; 
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  var newtext="这是新文本" 
  $("p").on("click",{"mytext":newtext},function(e){ 
    $(this).text(e.data.mytext); 
  }) 
}) 
</script> 
</head> 
<body> 
  <p>原来内容</p> 
</body> 
</html>

ログイン後にコピー

上記のコードは、data パラメーターを使用して、バインドされたイベント処理関数にデータを渡します。

例 4:

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

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
.parent{
  width:160px;
  height:160px;
  border:1px solid green;
  font-size:12px;
}
.children{
  width:100px;
  height:100px;
  border:1px solid red;
}
span{background-color:green;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  var newtext="这是新文本" 
  $(".parent").on("click",".children",{"mytext":newtext},function(e){ 
    $(this).text(e.data.mytext); 
  }) 
}) 
</script>
</head>
<body>
<p class="parent">
  <p class="children"><span>原来内容</span></p>
</p>
<span>大家好</span>
</body>
</html>

ログイン後にコピー

上記のコードは、セレクター文字列を使用して、一致する要素のどの子要素がバインドされたイベントに応答できるかをフィルターします。上記のコードでは、クラス名がchildrenである要素とその子要素はバインドされたイベントを呼び出すことができます。
文法構造 2:

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

$(selector).on(object,[selector],[data])

パラメータリスト:

参数	描述
object	一个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数。
selector	可选。一个选择器字符串，用以过滤选定的元素，该选择器的后裔元素将调用处理程序。如果选择是空或被忽略，当它到达选定的元素，事件总是触发。
data	可选。作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理。

实例代码:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" /> 
<title>脚本之家</title> 
<style type="text/css"> 
p{ 
  width:160px; 
  height:160px; 
  border:1px solid green; 
  font-size:12px; 
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  var newtext="这是新文本" 
  $("p").on({click:function(e){ 
    $(this).text(e.data.mytext); 
  }},{"mytext":newtext}) 
}) 
</script> 
</head> 
<body> 
  <p>原来内容</p> 
</body> 
</html>

ログイン後にコピー

以上代码中，事件类型和事件处理函数以对象的形式绑定的。

以上がjQuery の on() 関数の役割と使用法を分析するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。